/* ==========================================================================
   Cyber City · What we carry, the front page's department tiles (theme 0.11.0)
   Same rules as every sheet of the theme: tokens only, classes start with ecc- (or is-).
   ========================================================================== */

/* The tiles of Why Cyber City, one picture template (the department's object built from silver cubes on the black
   podium), just before the store; two to a row on a phone and a tablet, four from 1181px; the lit edge follows the
   mouse (.ecc-spot-edge, spot.css) and the tile leans a little (fx.js). The words come first in the markup; the
   picture lies under them. */
.ecc-hgrid > .ecc-carry { grid-column: span 1; }
.ecc-carry {
  position: relative; display: grid; align-items: end; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--ecc-r); background: var(--ecc-panel); color: var(--ecc-ink); text-decoration: none;
}
.ecc-carry--bench { background: var(--ecc-panel-2); }
.ecc-carry__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecc-carry__icon { position: absolute; top: var(--ecc-s-4); right: var(--ecc-s-4); display: grid; color: var(--ecc-lime); }
.ecc-carry__words {
  position: relative; z-index: var(--ecc-z-raised); display: grid; gap: var(--ecc-s-1); padding: var(--ecc-s-6) var(--ecc-s-3) var(--ecc-s-3);
  background: linear-gradient(to top, color-mix(in srgb, var(--ecc-panel) 88%, transparent), transparent);
}
.ecc-carry__name { margin: 0; color: var(--ecc-ink); font-size: var(--ecc-t-body); }
.ecc-carry__go { display: inline-flex; align-items: center; gap: var(--ecc-s-1); font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); color: var(--ecc-lime); }
.ecc-carry:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
@media (min-width: 761px) {
  .ecc-hgrid > .ecc-carry { grid-column: span 6; }
  .ecc-carry__words { padding: var(--ecc-s-6) var(--ecc-s-4) var(--ecc-s-4); }
  .ecc-carry__name { font-size: var(--ecc-t-h3); }
}
@media (min-width: 1181px) { .ecc-hgrid > .ecc-carry { grid-column: span 3; } }