@media (max-width: 63.99rem) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.7fr);
    gap: var(--space-12);
  }

  .catalog-grid:not(:empty) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 55.99rem) {
  :root {
    --header-height: 4.25rem;
  }

  .section {
    padding-block: var(--space-16);
  }

  .menu-toggle {
    display: block;
  }

  .primary-navigation {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: none;
    padding: var(--space-3) 1rem var(--space-5);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-subtle);
  }

  .primary-navigation[data-open="true"] {
    display: flex;
  }

  .primary-navigation a {
    min-height: 50px;
    padding-inline: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .primary-navigation a:last-child {
    border-bottom: 0;
  }

  .hero {
    padding-block: var(--space-16);
  }

  .hero-layout,
  .section-heading,
  .about-layout {
    grid-template-columns: 1fr;
  }

  .hero-layout {
    gap: var(--space-12);
  }

  .section-heading,
  .about-layout {
    gap: var(--space-6);
  }

  .section-heading > p {
    margin-bottom: 0;
  }

  .practice-guide {
    padding: var(--space-6);
  }

  .practice-guide::before {
    top: 4.6rem;
    bottom: var(--space-6);
    left: 3rem;
  }

  .catalog-grid:not(:empty) {
    grid-template-columns: 1fr;
  }

  .about-copy {
    padding-top: var(--space-6);
  }
}

@media (max-width: 35.99rem) {
  .container {
    width: min(calc(100% - 1.5rem), var(--container));
  }

  .button {
    width: 100%;
  }

  .brand-logo {
    width: 44px;
    height: 44px;
  }

  .catalog-empty {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .empty-marker {
    width: 100%;
    height: 5px;
    min-height: 5px;
    background: linear-gradient(90deg, var(--color-primary) 0 48%, var(--color-secondary) 48% 82%, var(--color-accent) 82%);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (min-width: 90rem) {
  .hero-layout {
    gap: 8.5rem;
  }
}