.tcf-showcase {
  position: relative;
}

.tcf-showcase__pin {
  position: sticky;
  top: 0;
  min-height: 100vh; /* min-height, not a fixed height — lets the pin grow if the grid needs more room, instead of clipping */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* nothing gets cropped, even mid-animation */
  /* sticky already establishes a containing block for position:absolute
     descendants, so .tcf-showcase__scaler's top/left/width/height below
     resolve against THIS box's full viewport-width, full-viewport-height
     dimensions — exactly what lets the scaler go genuinely edge-to-edge */
}

.tcf-showcase__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tcf-columns, 3), 1fr);
  grid-template-rows: repeat(3, auto); /* auto — row height comes from each item's aspect-ratio below */
  gap: var(--tcf-gap, 24px);
  width: min(var(--tcf-max-width, 1200px), 90vw);
  margin: 0 auto;
}

.tcf-showcase__layer {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  transform-origin: center;
  opacity: 0;
  transform: scale(0);
  will-change: transform, opacity;
}

.tcf-showcase__item,
.tcf-showcase__scaler-slot {
  aspect-ratio: var(--tcf-cell-ratio, 1 / 0.92); /* squarish — slightly wider than tall */
  border-radius: var(--tcf-radius, 12px);
  overflow: hidden;
}

.tcf-showcase__scaler-slot {
  visibility: hidden; /* reserves the grid cell's space without showing anything — the real scaler sits on top, absolutely positioned */
}

.tcf-showcase__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the real featured image — lives OUTSIDE the grid/subgrid entirely, as an
   absolutely-positioned overlay within .tcf-showcase__pin, so its width and
   height can morph freely from a full-width banner down to the grid's
   squarish cell size without being constrained by grid track sizing */
.tcf-showcase__scaler {
  position: absolute;
  z-index: 5;
  border-radius: var(--tcf-radius, 12px);
  overflow: hidden;
  will-change: top, left, width, height;
}

.tcf-showcase__scaler img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .tcf-showcase__layer {
    opacity: 1;
    transform: none;
  }
  .tcf-showcase__scaler {
    transform: none !important;
  }
}