/* Asymmetric (1440 × 660 + 48 gap): 660² at left 48; 316² at 732 / top 0; 316² at 1072 / top 344.
   Positions are shares of the 1344 × 660 content box, so the group stays on the page margins.
   Row (sand): 96 / 48 padding, 24 gap, 432 × 540 panels. */
.tc-case.tc-case-images {
  overflow: visible;
  background: var(--tangerine-cream, #fff9f5);
}

.tc-case-images .tc-case-images__cell {
  margin: 0;
}

.tc-case-images--asymmetric {
  padding: 0 var(--tc-m) calc(48 * var(--u));
}

/* Width is explicit so a set --tc-images-large wins over the aspect ratio. */
.tc-case-images--asymmetric .tc-case-images__grid {
  position: relative;
  width: 100%;
  height: var(--tc-images-large, auto);
  aspect-ratio: 1344 / 660;
}

.tc-case.tc-case-images--asymmetric .tc-case-images__cell {
  position: absolute;
}

.tc-case-images--asymmetric .tc-case-images__cell:nth-child(1) {
  left: 0;
  top: 0;
  width: calc(660 / 1344 * 100%);
  height: 100%;
}

.tc-case-images--asymmetric .tc-case-images__cell:nth-child(2) {
  left: calc(684 / 1344 * 100%);
  top: 0;
  width: calc(316 / 1344 * 100%);
  height: var(--tc-images-small, calc(316 / 660 * 100%));
}

.tc-case-images--asymmetric .tc-case-images__cell:nth-child(3) {
  left: calc(1024 / 1344 * 100%);
  bottom: 0;
  width: calc(316 / 1344 * 100%);
  height: var(--tc-images-small, calc(316 / 660 * 100%));
}

.tc-case.tc-case-images--row {
  padding: calc(96 * var(--u)) var(--tc-m);
  background: var(--tangerine-sand, #f0dfcf);
}

.tc-case-images--row .tc-case-images__grid {
  display: flex;
  gap: calc(24 * var(--u));
}

.tc-case-images--row .tc-case-images__cell {
  flex: 1 1 0;
  min-width: 0;
  height: calc(540 * var(--u));
}

.tc-case-images .tc-case-images__back,
.tc-case-images .tc-case-images__next {
  position: absolute;
  bottom: calc(32 * var(--u));
  z-index: 3;
}

.tc-case-images .tc-case-images__back {
  left: var(--tc-m);
}

.tc-case-images .tc-case-images__next {
  right: var(--tc-m);
}

/* Per-image "Hide on" switches. Hidden cells stay in the DOM so the nth-child layout holds. */
@media (min-width: 1025px) {
  .tc-case-images .tc-case-images__cell.tc-hide-d {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .tc-case-images .tc-case-images__cell.tc-hide-t {
    display: none;
  }

  .tc-case-images--asymmetric .tc-case-images__grid:has(> :nth-child(2).tc-hide-t) > :nth-child(3),
  .tc-case-images--asymmetric .tc-case-images__grid:has(> :nth-child(3).tc-hide-t) > :nth-child(2) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .tc-case-images .tc-case-images__cell.tc-hide-m {
    display: none;
  }

  .tc-case-images--asymmetric .tc-case-images__grid:has(> :nth-child(2).tc-hide-m) > :nth-child(3),
  .tc-case-images--asymmetric .tc-case-images__grid:has(> :nth-child(3).tc-hide-m) > :nth-child(2) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .tc-case-images--asymmetric {
    padding: 0 var(--tc-m) 48px;
  }

  .tc-case-images--asymmetric .tc-case-images__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    height: auto;
    aspect-ratio: auto;
  }

  .tc-case.tc-case-images--asymmetric .tc-case-images__cell:nth-child(n) {
    position: relative;
    inset: auto;
    width: 100%;
    height: var(--tc-images-small, auto);
    aspect-ratio: 1;
  }

  .tc-case.tc-case-images--asymmetric .tc-case-images__cell:nth-child(1) {
    grid-column: 1 / -1;
    height: var(--tc-images-large, auto);
  }

  .tc-case.tc-case-images--row {
    padding: 72px var(--tc-m) 96px;
  }

  .tc-case-images--row .tc-case-images__grid {
    gap: 20px;
  }

  .tc-case-images--row .tc-case-images__cell {
    height: auto;
    aspect-ratio: 432 / 540;
  }

  .tc-case-images .tc-case-images__back,
  .tc-case-images .tc-case-images__next {
    bottom: 32px;
  }
}

@media (max-width: 767px) {
  .tc-case-images--asymmetric .tc-case-images__grid {
    gap: 12px;
  }

  .tc-case.tc-case-images--row {
    padding: 56px var(--tc-m) 88px;
  }

  .tc-case-images--row .tc-case-images__grid {
    flex-direction: column;
    gap: 16px;
  }

  .tc-case-images--row .tc-case-images__cell {
    flex: none;
    width: 100%;
  }
}