.varns-work-gallery { padding-block: var(--varns-section-md); }
.varns-work-gallery__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  grid-template-areas: "heading stage" "controls stage";
  align-items: center;
  column-gap: clamp(2rem, 6vw, 7rem);
  max-inline-size: 72rem;
}
.varns-work-gallery__heading { grid-area: heading; align-self: end; padding-block-end: 2rem; }
.varns-work-gallery__heading h2 { max-inline-size: 12ch; font-size: clamp(2.75rem, 1.8rem + 3.4vw, 5.25rem); }
.varns-work-gallery__heading .varns-eyebrow { font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.4rem); }
.varns-work-gallery__heading > p:not(.varns-eyebrow) { font-size: clamp(1.15rem, 1.04rem + 0.38vw, 1.4rem); line-height: 1.55; }
.varns-work-gallery__stage { grid-area: stage; min-inline-size: 0; background: transparent; touch-action: pan-y; }
.varns-work-gallery__slide { position: relative; margin: 0; }
.varns-work-gallery__slide[hidden], .varns-work-gallery__controls[hidden] { display: none; }
.varns-work-gallery__slide > img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.varns-work-gallery__slide figcaption { padding: 1rem 0; color: var(--varns-charcoal-900); text-align: center; font-family: var(--varns-font-display); font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.varns-work-gallery__controls { grid-area: controls; align-self: start; }
.varns-work-gallery__thumbnails { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; padding: 0.35rem; margin: -0.35rem -0.35rem 1.5rem; }
.varns-work-gallery__thumbnails button { inline-size: 100%; padding: 3px; border: 2px solid transparent; background: transparent; cursor: pointer; opacity: 0.6; transition: opacity 160ms ease, border-color 160ms ease; }
.varns-work-gallery__thumbnails button[aria-pressed="true"] { opacity: 1; border-color: var(--varns-orange-600); }
.varns-work-gallery__thumbnails button:hover { opacity: 1; }
.varns-work-gallery__thumbnails img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.varns-work-gallery__navigation { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.varns-work-gallery__navigation button { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0.5rem; border: 1px solid var(--varns-border-200); background: var(--varns-cream-50); color: var(--varns-charcoal-900); cursor: pointer; }
.varns-work-gallery__navigation button:hover { border-color: var(--varns-orange-600); }
.varns-work-gallery__navigation button > span { font-size: 1.4rem; line-height: 1; }
.varns-work-gallery__count { min-inline-size: 4rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.9rem; }
@media (max-width: 47.99rem) {
  .varns-work-gallery__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "stage" "controls"; max-inline-size: 34rem; gap: 1.5rem; }
  .varns-work-gallery__heading { padding: 0; }
  .varns-work-gallery__heading h2 { max-inline-size: 16ch; }
  .varns-work-gallery__thumbnails { margin-block-end: 1rem; }
  .varns-work-gallery__thumbnails button { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .varns-work-gallery__thumbnails button { transition: none; }
}


@media (min-width: 64rem) {
  .varns-work-gallery {
    block-size: 90vh;
    padding-block: calc(var(--varns-header-height) + 1rem) 1.5rem;
  }
  .varns-work-gallery__layout {
    inline-size: 100%;
    max-inline-size: none;
    padding-inline: var(--varns-gutter);
    block-size: 100%;
    min-block-size: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .varns-work-gallery__heading {
    padding-block-end: clamp(0.75rem, 2vh, 1.5rem);
  }
  .varns-work-gallery__heading h2 {
    font-size: clamp(2.75rem, min(1.8rem + 3.4vw, 9vh), 5.25rem);
  }
  .varns-work-gallery__stage {
    align-self: stretch;
    min-block-size: 0;
  }
  .varns-work-gallery__slide {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    block-size: 100%;
    min-block-size: 0;
  }
  .varns-work-gallery__slide > img {
    block-size: 100%;
    min-block-size: 0;
    aspect-ratio: auto;
  }
  .varns-work-gallery__controls {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    min-block-size: 0;
    gap: 1rem;
    overflow: auto;
    padding: 0.35rem;
    margin: -0.35rem;
  }
  .varns-work-gallery__thumbnails {
    flex: 1;
    min-block-size: 9.25rem;
    grid-template-rows: repeat(3, minmax(2.75rem, 1fr));
    margin: 0;
    padding: 0;
  }
  .varns-work-gallery__thumbnails button {
    min-block-size: 0;
  }
  .varns-work-gallery__thumbnails img {
    block-size: 100%;
    min-block-size: 0;
    aspect-ratio: auto;
  }
  .varns-work-gallery__navigation {
    flex-shrink: 0;
  }
}

@media (min-width: 64rem) and (max-height: 43.75rem) {
  .varns-work-gallery__controls { gap: 0.5rem; }
  .varns-work-gallery__thumbnails {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(2.75rem, 1fr));
    min-block-size: 6rem;
  }
}