@media only screen and (min-width: 992px) {
  @supports (grid-area: auto) {
    body {
      grid-template-rows: 60px 400px minmax( calc(100% - 460px - 172px),auto) minmax(172px,min-content);
    }
  }
  .hero {
    height: 400px;
  }
  @supports not (grid-area: auto){
    .hero{
      display: flex;
      justify-content: center;
    }
  }
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .hero{
      display: flex;
      justify-content: center;
    }
  }
}

.collapse {
  height: 0;
  transition: height 0.25s ease-in;
}