/* Project-detail hero name — split out of the global heading-font rule in
 * ethar-brand.css (which still drives every other hero/heading title) so the
 * project-detail page's styling all lives in this file. */
.ethar-pp__hero-name {
  font-family: var(--font-headings-family) !important;
}

/* ── Project detail page (src/views/project.ts) ─────────────────────────────
 * Theme-aware (light/dark) marketing layout. Section-scoped tokens keep it on
 * brand; logical properties + dir on .ethar-pp mirror it with the language. */
.ethar-pp {
  --ethar-pp-edge: clamp(1.25rem, 6vw, 6rem);
  /* Match the rest of the site: a brand BRONZE accent (was a teal `--color-info`)
     on a forced LIGHT surface with dark text. Re-pointing the brand tokens here
     flips every var(--text-*)/var(--bg-*) usage on this page to the white-section
     palette used across About / Projects / News — no per-rule edits needed. */
  --ethar-pp-teal: #5f4338;
  --bg-app: #ffffff;
  --bg-primary: #ffffff;
  --text-primary: #16202b;
  --text-secondary: #5c5249;
  --text-tertiary: #8d847b;
  width: 100%;
  background: #ffffff !important;
}

/* Hero: looping project loop + scrim + white logo + meta. */
.ethar-pp__hero {
  position: relative;
  min-height: clamp(420px, 64vh, 680px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #000;
}
.ethar-pp__hero-video,
.ethar-pp__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Hero background video carousel (cross-fading project loops, wired by carousel.ts). */
.ethar-pp__hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ethar-pp__hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.ethar-pp__hero-slide[data-active] {
  opacity: 1;
}
.ethar-pp__hero-markers {
  position: absolute;
  z-index: 3;
  top: clamp(1rem, 3vw, 2rem);
  inset-inline-end: var(--ethar-pp-edge);
  display: inline-flex;
  gap: var(--space-1, 0.25rem);
  color: #fff;
  --ethar-dot-width: clamp(2.5rem, 4vw, 3.25rem);
}
.ethar-pp__hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55)),
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 55%);
  pointer-events: none;
}
.ethar-pp__hero-logo {
  position: absolute;
  inset: 0 0 18%;
  z-index: 2;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: min(46%, 360px) auto;
  mask-size: min(46%, 360px) auto;
  filter: drop-shadow(0 3px 22px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.ethar-pp__hero-meta {
  position: relative;
  z-index: 3;
  padding: var(--ethar-pp-edge);
  padding-block-start: 0;
  text-align: start;
  color: #fff;
}
.ethar-pp__hero-meta .ethar-pp__hero-name {
  color: #fff;
  margin: 0 0 0.6rem;
  font-size: clamp(2.6rem, 5vw, 4.75rem);
  font-weight: 400;
  line-height: 1.05;
}
.ethar-pp__hero-meta .ethar-pp__hero-tagline {
  color: #fff;
  margin: 0 0 0.4rem;
}
.ethar-pp__hero-meta .ethar-pp__hero-loc {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
.ethar-pp__hero-status {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.3rem 0.9rem;
  border-radius: 0;
  background: color-mix(in srgb, var(--ethar-pp-teal) 85%, transparent);
  color: #fff8f2;
  font-size: 0.85rem;
}
.ethar-pp__hero-status .xwui-tag-label {
  color: #fff8f2;
}

/* Animated KPI band. */
.ethar-pp__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--ethar-pp-edge);
  background: var(--bg-primary);
}
.ethar-pp__stat.xwui-statistic {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}
.ethar-pp__stat .xwui-statistic-title {
  color: var(--text-secondary);
  /* Was clamp(0.85rem…) → 13.6px EN on phones. Lift these KPI labels. */
  font-size: clamp(1rem, 1.2vw, 1.2rem);
}
.ethar-pp__stat .xwui-statistic-value {
  color: var(--ethar-pp-teal);
  font-family: var(--font-headings-family) !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Sections. */
.ethar-pp__section {
  padding: clamp(2.5rem, 6vw, 5rem) var(--ethar-pp-edge);
}
.ethar-pp .ethar-pp__h2 {
  color: var(--ethar-pp-teal);
  margin: 0 0 clamp(1rem, 2.5vw, 2rem);
}
.ethar-pp__lead {
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0 0 1rem;
  line-height: 1.9;
}
.ethar-pp__lead-final,
.ethar-pp__amenities-lead {
  color: var(--text-secondary);
  max-width: 72ch;
  margin: 0 0 1rem;
  line-height: 1.9;
}
.ethar-pp__lead-final {
  color: var(--text-secondary);
}
.ethar-pp__note {
  color: var(--text-tertiary);
  margin: 0;
}

/* Overview: copy + facts table. */
.ethar-pp__overview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  /* Dark band like the stats section / footer: navy→cocoa gradient + light text.
     Re-point the text tokens so the lead, note, facts and hairlines all flip to
     light within this section only. */
  --text-primary: #f7f5f2;
  --text-secondary: rgba(247, 245, 242, 0.82);
  --text-tertiary: rgba(247, 245, 242, 0.58);
  background: linear-gradient(180deg, #050b17 0%, #0a0d18 46%, #17151c 72%, #392a28 100%);
  color: #f7f5f2;
}
/* Heading reads as the brand champagne-gold accent on the dark band (the bronze
   used on the white sections is too dark here). */
.ethar-pp .ethar-pp__overview .ethar-pp__h2 {
  color: var(--ethar-gold);
}
.ethar-pp__facts {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
}
.ethar-pp__fact {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
}
.ethar-pp__fact dt {
  color: var(--text-secondary);
}
.ethar-pp__fact dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
  text-align: end;
}

/* Masterplan + gallery images. */
.ethar-pp__masterplan-fig {
  margin: 0;
}
.ethar-pp__masterplan-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}
.ethar-pp__gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.ethar-pp__shot {
  margin: 0;
}
.ethar-pp__shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Amenities pills. */
.ethar-pp__amenities-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.ethar-pp__amenity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: 0;
  background: color-mix(in srgb, var(--ethar-pp-teal) 9%, var(--bg-primary));
  border: 1px solid color-mix(in srgb, var(--ethar-pp-teal) 28%, transparent);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.ethar-pp__amenity:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ethar-pp-teal) 18%, transparent);
}
.ethar-pp__amenity-icon {
  color: var(--ethar-pp-teal);
  font-size: clamp(2.6rem, 5vw, 3.6rem) !important;
  line-height: 1;
}
.ethar-pp__amenity .ethar-pp__amenity-label {
  color: var(--text-primary);
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

/* Project image slider: XWUIGalleryViewer in carousel mode. */
.ethar-pp__slider {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ethar-pp-teal) 6%, var(--bg-primary)) 0%,
    var(--bg-primary) 100%
  );
}
/* Custom elements default to display:inline; make the gallery host block
 * so the inner div.xwui-gallery-viewer gets a proper block containing box. */
.ethar-pp__slider xwui-gallery-viewer {
  display: block;
}
.ethar-pp__slider-viewer {
  --ethar-pp-slider-ratio: 1920 / 1080;
  --radius-carousel: 0;
  --bg-elevated: color-mix(in srgb, #050b17 82%, transparent);
  --bg-primary: color-mix(in srgb, var(--ethar-pp-teal) 78%, #000);
  --bg-secondary: color-mix(in srgb, #ffffff 68%, transparent);
  --text-primary: #fff8f2;
}
.ethar-pp__slider-viewer .xwui-carousel {
  overflow: hidden;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--ethar-pp-teal) 24%, transparent);
  background: #050b17;
  box-shadow: 0 1.5rem 4rem color-mix(in srgb, #050b17 18%, transparent);
  touch-action: pan-y;
}
.ethar-pp__slider-viewer .xwui-carousel-track {
  align-items: flex-start;
  /* transition on the track drives navigation; don't let it get sluggish */
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Base XWUICarousel CSS defaults slides to opacity:0 (active=1) and animates
 * both opacity AND transform simultaneously. That causes both images to be
 * half-transparent at once during the slide, which looks like cropping.
 * Override: all slides stay fully opaque; only the track transform handles
 * navigation, giving a clean wipe instead of a ghost-blend. */
.ethar-pp__slider-viewer .xwui-carousel-slide {
  width: 100%;
  height: auto;
  opacity: 1 !important;
  transition: none !important;
}
.ethar-pp__slider-viewer .xwui-gallery-carousel-item {
  display: block;
  width: 100%;
  aspect-ratio: var(--ethar-pp-slider-ratio);
  background: #050b17;
}
.ethar-pp__slider-viewer .xwui-gallery-carousel-item img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--ethar-pp-slider-ratio);
  object-fit: contain;
}
.ethar-pp__slider-viewer .xwui-carousel-arrow {
  width: clamp(2.75rem, 5vw, 4rem);
  height: clamp(2.75rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: color-mix(in srgb, #050b17 72%, transparent);
  color: #fff8f2;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  padding: 0 0 0.12em;
  box-shadow: 0 0.75rem 1.8rem color-mix(in srgb, #000 26%, transparent);
}
.ethar-pp__slider-viewer .xwui-carousel-arrow:hover {
  background: color-mix(in srgb, var(--ethar-pp-teal) 74%, #050b17);
}
.ethar-pp__slider-viewer .xwui-carousel-indicators {
  bottom: clamp(1rem, 2vw, 1.5rem);
}
.ethar-pp__slider-viewer .xwui-carousel-indicator {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 0;
  background: color-mix(in srgb, #fff8f2 58%, transparent);
}
.ethar-pp__slider-viewer .xwui-carousel-indicator-active {
  width: 2.4rem;
  background: var(--ethar-pp-teal);
}

@media (max-width: 640px) {
  .ethar-pp__slider {
    padding-block: clamp(1.75rem, 8vw, 2.5rem);
    padding-inline: clamp(0.9rem, 4vw, 1.25rem);
  }
  .ethar-pp__slider .ethar-pp__h2 {
    margin-bottom: clamp(0.9rem, 4vw, 1.25rem);
  }
  .ethar-pp__slider-viewer {
    max-width: min(100%, 30rem);
    margin-inline: auto;
  }
  .ethar-pp__slider-viewer .xwui-carousel-arrow {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 1.9rem;
  }
  .ethar-pp__slider-viewer .xwui-carousel-arrow-prev {
    left: 0.5rem;
  }
  .ethar-pp__slider-viewer .xwui-carousel-arrow-next {
    right: 0.5rem;
  }
  .ethar-pp__slider-viewer .xwui-carousel-indicators {
    bottom: 0.7rem;
  }
}

@media (max-width: 420px) {
  .ethar-pp__slider-viewer {
    max-width: min(100%, 21rem);
  }
}

/* Location. */
/* Location headline — city · district, large and centred. */
.ethar-pp__loc-headline {
  color: var(--ethar-pp-teal);
  text-align: center;
  font-size: clamp(1.9rem, 5vw, 3.25rem);
  line-height: 1.2;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
}

/* Nearby landmarks as stat figures: icon + (count-up) travel time + name. */
.ethar-pp__near-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 3vw, 2.5rem);
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}
.ethar-pp__near {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
}
.ethar-pp__near-icon {
  color: var(--ethar-pp-teal);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important;
  line-height: 1;
}
.ethar-pp__near-fig.xwui-statistic {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}
.ethar-pp__near-fig .xwui-statistic-title {
  color: var(--text-secondary);
  /* Was clamp(0.8rem…1rem) → 12.8px EN on phones. Lift landmark-name labels. */
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  max-width: 20ch;
}
.ethar-pp__near-fig .xwui-statistic-value {
  color: var(--ethar-pp-teal);
  font-family: var(--font-headings-family) !important;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}
.ethar-pp__near-fig .xwui-statistic-suffix {
  color: var(--ethar-pp-teal);
  font-size: clamp(0.85rem, 1.3vw, 1.1rem);
  font-weight: 700;
  margin-inline-start: 0.25rem;
}
/* Non-numeric entries (e.g. "on site" / "adjacent") — smaller, wraps. */
.ethar-pp__near--text .xwui-statistic-value {
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  font-weight: 600;
  white-space: normal;
}

/* ── Project gallery (xwui-gallery-viewer) ──────────────────────────────────
 * Small thumbnails in a centred horizontal row; click opens xwui's full-screen
 * lightbox (prev/next, scroll-locked, close on X/Esc/outside). The lightbox
 * backdrop is blurred + darkened, and a bottom filmstrip is added by
 * src/app/gallery-lightbox.ts. */
.ethar-pp__gallery-viewer {
  /* Configurable thumbnail size — bump this var to make the gallery bigger. */
  --ethar-gallery-thumb: clamp(240px, 28vw, 380px);
}
.ethar-pp__gallery-viewer .xwui-gallery-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ethar-gallery-thumb), 1fr));
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  justify-content: center;
}
.ethar-pp__gallery-viewer .xwui-gallery-grid-container > * {
  width: auto;
  min-width: 0;
}
/* The gallery viewer renders a vestigial, empty .xwui-gallery-grid div as the
 * FIRST child of the container (the real thumbnails render as its siblings), so
 * it occupied an empty grid cell — that was the blank "first box". Hide the
 * empty grid so the photos fill the row cleanly. */
.ethar-pp__gallery-viewer .xwui-gallery-grid-container > .xwui-gallery-grid:not(:has(img)) {
  display: none !important; /* beats the element's inline display:grid */
}
.ethar-pp__gallery-viewer .xwui-gallery-card-wrapper {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
}
.ethar-pp__gallery-viewer .xwui-gallery-thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.ethar-pp__gallery-viewer .xwui-gallery-card-wrapper:hover .xwui-gallery-thumbnail {
  transform: scale(1.05);
}

/* Blur + darken the page behind the lightbox (xwui-dialog overlay). Ethar's
 * only dialog is this lightbox, so the dialog overrides below are safe. */
.xwui-dialog-overlay {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--bg-overlay-blur, rgba(0, 0, 0, 0.72));
  align-items: center;
  padding: clamp(0.5rem, 2vw, 1.5rem);
}
/* Near-fullscreen lightbox so the image is as large as possible. */
.xwui-dialog {
  max-width: min(1320px, 96vw) !important;
  width: min(1320px, 96vw);
  max-height: 96vh;
}
.xwui-dialog-body {
  padding: 0.4rem !important;
  display: flex;
}
/* Lay the lightbox out as image (fills) + bottom filmstrip. */
.xwui-gallery-lightbox {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}
.xwui-gallery-lightbox-image-container {
  flex: 1 1 auto;
  min-height: 0;
}
.xwui-gallery-lightbox-image {
  max-height: 84vh;
  width: 100%;
  object-fit: contain;
}

/* Bottom filmstrip injected into the lightbox (gallery-lightbox.ts). */
.ethar-lightbox-strip {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0.75rem 0 0.25rem;
  margin-top: 0.75rem;
}
.ethar-lightbox-strip__thumb {
  width: clamp(48px, 9vw, 84px);
  height: clamp(36px, 6.5vw, 60px);
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition:
    opacity 0.18s ease,
    border-color 0.18s ease;
}
.ethar-lightbox-strip__thumb:hover {
  opacity: 0.85;
}
.ethar-lightbox-strip__thumb.is-active {
  opacity: 1;
  border-color: var(--accent-primary, var(--ethar-pp-teal, #0f766e));
}
/* Location = a full-bleed map STAGE; the heading + city + figures float over the
 * top of the map in a semi-transparent panel (the map "expands up" behind them
 * and runs flush to the footer below). */
.ethar-pp__location {
  padding: 0;
}
.ethar-pp__loc-stage {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(560px, 82vh, 800px);
  overflow: hidden;
}
.ethar-pp__loc-stage .ethar-pp__map:not(.ethar-map-static) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  z-index: 0;
}
.ethar-pp__loc-panel {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 6vw, 4rem) clamp(2.25rem, 5vw, 3.5rem);
  /* Start from the SAME solid colour as the section above it (the CTA uses
   * --bg-primary, i.e. white in light / dark surface in dark) and fade to
   * transparent so it blends seamlessly into the live map below — while staying
   * opaque enough behind the figures for contrast. */
  background: linear-gradient(
    to bottom,
    var(--bg-primary) 0%,
    color-mix(in srgb, var(--bg-primary) 85%, transparent) 72%,
    transparent 100%
  );
}
.ethar-pp__map xwui-map,
.ethar-pp__map .xwui-map {
  display: block;
  width: 100%;
  height: 100%;
}
/* The static (offline) card shouldn't be forced to the tall map height. */
.ethar-pp__map.ethar-map-static {
  height: auto;
}

/* CTA. */
.ethar-pp__cta {
  text-align: center;
  padding: clamp(3rem, 7vw, 6rem) var(--ethar-pp-edge);
  background: var(--bg-primary);
}
.ethar-pp__cta-title {
  color: var(--ethar-pp-teal);
  margin: 0 0 1.5rem;
}
.ethar-pp__cta-row {
  display: inline-flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
/* Sharp-cornered brand buttons (match About/Projects/News): bronze-filled
   primary, thin bronze-outline secondary. */
.ethar-pp__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 2.25rem;
  border-radius: 0;
  text-decoration: none;
  font-weight: 600;
  color: var(--ethar-pp-teal);
  background: transparent;
  border: 1px solid var(--ethar-pp-teal);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}
.ethar-pp__btn:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--ethar-pp-teal) 10%, transparent);
}
.ethar-pp__btn--primary {
  background: var(--ethar-pp-teal);
  border-color: var(--ethar-pp-teal);
  color: #fff8f2;
}
.ethar-pp__btn--primary:hover {
  background: color-mix(in srgb, var(--ethar-pp-teal) 86%, #000);
  color: #fff8f2;
}

@media (max-width: 860px) {
  .ethar-pp__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
  .ethar-pp__overview {
    grid-template-columns: minmax(0, 1fr);
  }
  .ethar-pp__amenities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .ethar-pp__amenities-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ethar-pp__amenities-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}