/* Mobile */
@media (max-width: 899px) {
  .site-header {
    box-shadow: 0 1px 0 var(--color-header);
  }

  .hero__content {
    transform: translate(-35px, 5px);
  }

  .hero__logo {
    transform: translateX(16px);
  }

  .hero__slide.hero__slide--bird {
    background-position: 15% center;
  }
}

/* Tablet+ */
@media (min-width: 640px) {
  .site-logo__line {
    height: 3.8rem;
    clip-path: inset(17% 0 2% 0);
    margin-top: -0.2rem;
    margin-bottom: 0.25rem;
  }

  .hero__slide--pos-left,
  .category-link__bg--pos-left,
  .page-hero__bg--pos-left:not(.page-hero__bg--pos-top) {
    background-position: center;
  }

  .page-hero__bg--pos-top,
  .page-hero__bg--pos-left.page-hero__bg--pos-top {
    background-position: center -20px;
  }

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

  .maker-row {
    grid-template-columns: 7rem 1fr auto;
    gap: var(--space-5);
  }

  .product-detail {
    grid-template-columns: minmax(0, 1fr) 12rem;
    align-items: start;
    gap: var(--space-6);
    padding-block: var(--space-7);
  }

  .product-detail--with-media {
    grid-template-areas:
      "meta ."
      "body media"
      "actions media";
    gap: 0 calc(var(--space-6) * 1.5);
  }

  .product-detail--with-media .product-detail__body {
    margin-bottom: 0;
  }

  .product-detail__desc {
    margin-bottom: var(--space-5);
  }

}

/* Desktop */
@media (min-width: 900px) {
  .site-logo__line {
    height: 4.4rem;
    clip-path: inset(17% 0 2% 0);
    margin-top: -0.35rem;
    margin-bottom: 0.25rem;
  }

  .site-logo__subtitle {
    font-size: 0.96rem;
    line-height: 1.3;
  }

  .site-nav {
    display: block;
  }

  .site-nav__link {
    font-size: var(--fs-md);
  }

  .menu-toggle {
    display: none;
  }

  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-5);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-8);
    row-gap: var(--space-7);
  }

}

@media (min-width: 1100px) {
  .category-link {
    min-height: 14rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}