@media (min-width: 980px) {
  .site-header {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    transform: none;
  }

  .site-header.header-hidden {
    transform: translateY(calc(-100% - 8px));
  }

  .header-inner {
    width: min(calc(100% - 32px), var(--container));
    padding-inline: 0;
  }

  .hero {
    padding-top: 180px;
  }
}