@media (max-width: 1200px) {
  .cards-grid--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .hero__inner,
  .about,
  .about-story,
  .about-principles,
  .contacts {
    grid-template-columns: 1fr;
  }

  .catalog-page {
    grid-template-columns: 1fr;
  }

  .hero__media {
    max-width: 760px;
  }

  .hero__media--logo {
    transform: translateY(32px);
  }

  .hero__media--logo {
    transform: translateY(-12px);
  }

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

  .feature h3 {
    min-height: 2.8em;
  }

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

  .step h3 {
    min-height: 3.4em;
  }

  .brand-logo {
    flex-basis: 186px;
  }

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

@media (max-width: 992px) {
  .topbar {
    display: none;
  }

  .header__inner {
    min-height: 74px;
  }

  .nav,
  .header__cta {
    display: none;
  }

  .burger {
    display: inline-flex;
  }

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

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(100% - 28px, var(--container));
  }

  .section {
    padding: 72px 0;
  }

  .hero {
    padding: 62px 0;
  }

  .hero__media--logo {
    transform: translateY(18px);
  }

  .hero__media--logo {
    transform: translateY(-6px);
  }

  .hero__metrics,
  .stats {
    grid-template-columns: 1fr;
  }

  .cards-grid--4,
  .features,
  .steps,
  .testimonials {
    grid-template-columns: 1fr;
  }

  .step h3 {
    min-height: auto;
  }

  .feature h3 {
    min-height: auto;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .about-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__grid,
  .footer__bottom {
    grid-template-columns: 1fr;
    display: grid;
    justify-content: start;
  }
}

@media (max-width: 576px) {
  .brand-marquee::before,
  .brand-marquee::after {
    width: 24px;
  }

  .brand-logo {
    flex-basis: 164px;
    height: 82px;
  }

  .logo__image {
    width: 148px;
  }

  .hero__media--logo {
    transform: translateY(10px);
  }

  .hero__title {
    font-size: 1.9rem;
  }

  .btn {
    width: 100%;
  }

  .hero__actions {
    width: 100%;
  }

  .section__title {
    font-size: 1.65rem;
  }

  .back-top {
    right: 14px;
    bottom: 14px;
  }
}