.gallery {
  padding: 5.5rem clamp(1.25rem, 6vw, 5rem) 6rem;
}

.gallery__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  margin: 0 auto 2.5rem;
  max-width: 34rem;
}

.gallery__head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  margin-bottom: 0;
}

.gallery__hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.gallery__hint i {
  color: var(--accent-soft);
  font-size: 0.8rem;
}

.gallery__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

.gallery__item {
  flex: 1 1 240px;
  margin: 0;
}

.gallery__item--tall {
  flex: 1.3 1 260px;
}

.gallery__item--wide {
  flex: 2 1 400px;
}

.gallery__item .paint-reveal {
  border-radius: 20px;
  border: 1px solid var(--surface-line);
  aspect-ratio: 1 / 1;
}

.gallery__item--tall .paint-reveal {
  aspect-ratio: 4 / 5;
}

.gallery__item--wide .paint-reveal {
  aspect-ratio: 16 / 10;
}

.gallery__item .paint-reveal {
  cursor: pointer;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gallery__grid--trio .gallery__item {
  flex: 1 1 220px;
}

.gallery__grid--trio .gallery__item .paint-reveal {
  aspect-ratio: 3 / 4;
  background: var(--surface-soft);
  padding: 0.75rem;
}

.gallery__grid--trio .gallery__item img {
  object-fit: contain;
}

.gallery__item:hover img {
  transform: scale(1.05);
}

.gallery__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
}

.gallery__placeholder i {
  font-size: 1.6rem;
  color: var(--surface-line);
}

.carousel {
  position: relative;
  margin-top: clamp(4rem, 8vw, 6rem);
}

.carousel__track {
  --carousel-item-half: clamp(150px, 13.5vw, 220px);
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.5rem 0.25rem 1.25rem;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__spacer {
  flex: 0 0 auto;
  align-self: stretch;
  width: calc(50% - var(--carousel-item-half));
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.carousel__hint i {
  font-size: 2.1rem;
  color: var(--accent);
  animation: carousel-hint-nudge 1.8s ease-in-out infinite;
}

.carousel__spacer:last-child .carousel__hint i {
  animation-name: carousel-hint-nudge-reverse;
}

@keyframes carousel-hint-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}

@keyframes carousel-hint-nudge-reverse {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__hint i {
    animation: none;
  }
}

.carousel__item {
  flex: 0 0 auto;
  width: clamp(300px, 27vw, 440px);
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--surface-line);
  background: var(--surface-soft);
  scroll-snap-align: center;
}

.carousel__item:nth-child(even) {
  margin-top: 1.5rem;
}

.carousel__item .paint-reveal {
  width: 100%;
  height: 100%;
  padding: 0.85rem;
  cursor: pointer;
}

.carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.35s ease;
}

.carousel__item:hover img {
  transform: scale(1.06);
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  z-index: 2;
  color: var(--text);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.carousel__arrow:hover {
  background: var(--accent);
  color: var(--surface);
  transform: translateY(-50%) scale(1.06);
}

.carousel__arrow--prev {
  left: -0.5rem;
}

.carousel__arrow--next {
  right: -0.5rem;
}

.gallery__note {
  display: flex;
  margin: 1.75rem auto 0;
  justify-content: center;
  width: fit-content;
  font-size: 0.9rem;
  color: var(--accent-soft);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.gallery__note i {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.gallery__note:hover {
  color: var(--accent);
  border-color: var(--accent-soft);
}

.gallery__note:hover i {
  transform: scale(1.12);
}

@media (max-width: 480px) {
  .gallery {
    padding: 4rem 1.25rem 4.5rem;
  }

  .carousel__arrow {
    display: none;
  }

  .carousel__hint {
    gap: 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }

  .carousel__hint i {
    font-size: 1.3rem;
  }

  .carousel__track {
    --carousel-item-half: clamp(70px, 21vw, 87.5px);
  }

  .carousel__item {
    width: clamp(140px, 42vw, 175px);
  }

  .carousel__item:nth-child(even) {
    margin-top: 0.9rem;
  }

  .gallery__grid {
    gap: 0.6rem;
  }

  .gallery__item,
  .gallery__item--tall,
  .gallery__item--wide {
    flex: 1 1 calc(50% - 0.3rem);
  }

  .gallery__item--tall .paint-reveal,
  .gallery__item--wide .paint-reveal {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 320px) {
  .gallery__grid {
    gap: 0.5rem;
  }

  .gallery__item,
  .gallery__item--tall,
  .gallery__item--wide {
    flex: 1 1 calc(50% - 0.25rem);
  }
}