.cc_hCf4wiNMOJ_OhwJYQykef .kv, .cc_hCf4wiNMOJ_OhwJYQykef .kv * {
  box-sizing: border-box;
}

.cc_hCf4wiNMOJ_OhwJYQykef .kv {
  width: 100%;
}

/* Mobile: stacked, each panel full screen width. */
.cc_hCf4wiNMOJ_OhwJYQykef .kv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.cc_hCf4wiNMOJ_OhwJYQykef .kv__card {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.cc_hCf4wiNMOJ_OhwJYQykef .kv__card + .kv__card {
  /* Overlap the seam by 1px so fractional widths can't expose the section
     background as a hairline between the two panels. */
  margin-top: -1px;
}

.cc_hCf4wiNMOJ_OhwJYQykef .kv__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc_hCf4wiNMOJ_OhwJYQykef .kv__media--empty {
  background: #f4f4f4;
}

.cc_hCf4wiNMOJ_OhwJYQykef .kv__label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4, 16px);
  font-family: var(--font-heading, "Outfit", sans-serif);
  font-size: var(--kv-fs-mobile, 40px);
  font-weight: var(--kv-fw, 600);
  line-height: 1;
  letter-spacing: var(--kv-ls, -1px);
  text-align: center;
  overflow-wrap: anywhere;
  /* Readability without darkening the photo: a tight shadow defines the
     letter edges, wider soft layers lift the word off busy backgrounds. */
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.4),
    0 2px 12px rgb(0 0 0 / 0.35),
    0 0 40px rgb(0 0 0 / 0.3);
  transition: opacity 280ms ease;
}

/* Hover: the label eases back slightly so the photo comes forward. */
@media (hover: hover) and (pointer: fine) {
  .cc_hCf4wiNMOJ_OhwJYQykef .kv__card:hover .kv__label {
    opacity: 0.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_hCf4wiNMOJ_OhwJYQykef .kv__label {
    transition: none;
  }
}

/* Tablet and desktop: two panels side by side, touching. */
@media (min-width: 768px) {
  /* Height lives on the shared row (two 3:4 panels = 3:2), not on each card,
     so the 1px seam overlap can't make the second panel taller. */
  .cc_hCf4wiNMOJ_OhwJYQykef .kv__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: 3 / 2;
  }

  .cc_hCf4wiNMOJ_OhwJYQykef .kv__card {
    aspect-ratio: auto;
    height: 100%;
  }

  .cc_hCf4wiNMOJ_OhwJYQykef .kv__card + .kv__card {
    margin-top: 0;
    margin-left: -1px;
  }

  .cc_hCf4wiNMOJ_OhwJYQykef .kv__label {
    font-size: var(--kv-fs-tablet, 48px);
  }
}

@media (min-width: 1024px) {
  .cc_hCf4wiNMOJ_OhwJYQykef .kv__label {
    font-size: var(--kv-fs-desktop, 72px);
  }
}

/* Desktop: a very soft vignette on the inner edges, meeting at the seam. */
@media (min-width: 1024px) {
  .cc_hCf4wiNMOJ_OhwJYQykef .kv__card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to left, rgb(0 0 0 / 0.14), rgb(0 0 0 / 0) 10%);
  }

  .cc_hCf4wiNMOJ_OhwJYQykef .kv__card + .kv__card::after {
    background: linear-gradient(to right, rgb(0 0 0 / 0.14), rgb(0 0 0 / 0) 10%);
  }
}