@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-content {
    flex: auto;
  }
}
.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}


footer {
  flex: 1;
  background-color:#d0d9de;
  height:160px;
 
}
header
 {
  flex: 1;
  background-color:#d0d9de;
  height:198px;
  background-image:url(/uiFramework/commonResource/image/2022031813333328591.jpg)
}

.HolyGrail-body {
  display: flex;
  flex: 1;
  padding-top:5vh;
  padding-bottom:5vh;
}

.HolyGrail-content {
  flex: 1;
  padding-left:100px;
 padding-right:100px;}