/* ─── Tablet (≤ 960px) ─── */

@media (max-width: 960px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .painting-detail__layout {
    grid-template-columns: 1fr;
  }

  .painting-detail__info {
    position: static;
  }

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

/* ─── Mobile (≤ 640px) ─── */

@media (max-width: 640px) {
  :root {
    --text-4xl: 2.25rem;
    --text-5xl: 2.75rem;
  }

  .container {
    padding-inline: var(--space-4);
  }

  .site-nav__links {
    gap: var(--space-4);
  }

  .site-nav__brand {
    font-size: var(--text-xl);
  }

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

  .carousel {
    height: 55vh;
  }

  .carousel__caption {
    padding: var(--space-4) var(--space-4) var(--space-8);
  }

  .carousel__caption-title {
    font-size: var(--text-2xl);
  }

  .carousel__btn {
    width: 2.5rem;
    height: 2.5rem;
  }

  .painting-detail__title {
    font-size: var(--text-3xl);
  }

  .painting-nav {
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
  }

  .painting-nav__link--next {
    align-self: flex-end;
  }

  .page-hero__title {
    font-size: var(--text-3xl);
  }

  .contacts-intro__heading {
    font-size: var(--text-2xl);
  }
}