.h2-preview-cards {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background: var(--color-white);
  color: var(--color-faragalla-navy-deep);
  font-family: var(--font-body);
}

.h2-preview-cards__grid {
  --h2-preview-card-gap: clamp(6px, 0.75vw, 10px);
  --h2-preview-card-count: 3;
  --h2-preview-grid-width: min(var(--site-container-width), calc(100vw - var(--site-container-gutter)));
  --h2-preview-label-width: calc(
    (var(--h2-preview-grid-width) - (var(--h2-preview-card-count) - 1) * var(--h2-preview-card-gap)) / var(--h2-preview-card-count) - 44px
  );
  display: flex;
  gap: var(--h2-preview-card-gap);
  width: var(--site-container);
  margin: 0 auto;
}

.h2-preview-cards__grid:has(> .h2-preview-cards__card:first-child:nth-last-child(2)) {
  --h2-preview-card-count: 2;
}

.h2-preview-cards__grid:has(> .h2-preview-cards__card:first-child:nth-last-child(1)) {
  --h2-preview-card-count: 1;
}

.h2-preview-cards__card {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: clamp(440px, 55vw, 760px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: var(--color-neutral-900);
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition:
    flex-grow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    filter var(--duration-normal) var(--ease-out);
}

.h2-preview-cards__grid:hover .h2-preview-cards__card {
  flex-grow: 0.65;
}

.h2-preview-cards__grid:hover .h2-preview-cards__card:hover,
.h2-preview-cards__grid:focus-within .h2-preview-cards__card:focus-visible {
  z-index: 2;
  flex-grow: 1.8;
  border-color: rgba(255, 255, 255, 0.34);
  filter: brightness(1.08);
}

.h2-preview-cards__card:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 6px;
}

.h2-preview-cards__media,
.h2-preview-cards__media picture,
.h2-preview-cards__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.h2-preview-cards__image {
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.h2-preview-cards__card:hover .h2-preview-cards__image,
.h2-preview-cards__card:focus-visible .h2-preview-cards__image {
  transform: scale(1.05);
}

.h2-preview-cards__image--fallback {
  background:
    radial-gradient(circle at 48% 30%, rgba(255, 255, 255, 0.72), transparent 14%),
    linear-gradient(120deg, var(--color-neutral-800), var(--color-neutral-350) 48%, var(--color-neutral-850));
}

.h2-preview-cards__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.56)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 50%, rgba(0, 0, 0, 0.28));
}

.h2-preview-cards__label-wrap {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 22px;
  left: 22px;
  overflow: hidden;
  pointer-events: none;
}

.h2-preview-cards__grid:hover .h2-preview-cards__card:not(:hover):not(:focus-visible) .h2-preview-cards__label-wrap {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 52px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 52px), transparent 100%);
}

.h2-preview-cards__label {
  display: block;
  box-sizing: border-box;
  width: var(--h2-preview-label-width);
  max-width: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.h2-preview-cards__modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  padding: 64px;
}

.h2-preview-cards__modal.is-open {
  display: block;
}

.h2-preview-cards__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 30, 0.58);
  backdrop-filter: blur(18px);
}

.h2-preview-cards__viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.h2-preview-cards__preview-shell,
.h2-preview-cards__preview {
  width: 100%;
  height: 100%;
}

.h2-preview-cards__preview-shell {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48);
}

.h2-preview-cards__preview {
  position: absolute;
  inset: 0;
  display: none;
  overflow-y: auto;
  background: var(--color-white);
  color: var(--color-faragalla-ink);
  isolation: isolate;
  scroll-behavior: smooth;
}

.h2-preview-cards__preview.is-active {
  display: block;
}

.h2-preview-cards__preview-media,
.h2-preview-cards__preview-media picture,
.h2-preview-cards__preview-image {
  display: block;
  width: 100%;
  height: 100%;
}

.h2-preview-cards__preview-media {
  position: sticky;
  top: 0;
  z-index: 0;
  overflow: hidden;
  height: var(--preview-panel-height, 400px);
  margin-bottom: calc(400px - var(--preview-panel-height, 400px));
  background: var(--color-faragalla-blue-pale);
  clip-path: inset(0 0 calc(var(--preview-panel-height, 400px) - var(--preview-hero-height, 400px)) 0);
}

.h2-preview-cards__preview-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.88)),
    rgba(255, 255, 255, var(--preview-whitewash, 0));
  content: "";
  pointer-events: none;
  transition: background var(--duration-fast) linear;
}

.h2-preview-cards__preview-image {
  object-fit: cover;
  filter: blur(var(--preview-blur, 0px));
  transform: scale(var(--preview-scale, 1));
  transform-origin: center center;
  transition:
    filter var(--duration-fast) linear,
    transform var(--duration-fast) linear;
}

.h2-preview-cards__preview-gradient {
  display: none;
}

.h2-preview-cards__preview-content {
  position: relative;
  z-index: 3;
  width: min(780px, calc(100% - 64px));
  margin: -96px auto 0;
  padding: 42px 0 72px;
  text-align: center;
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.78);
  transform: translateZ(0);
}

.h2-preview-cards__kicker {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  color: var(--color-faragalla-ink);
  background: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.h2-preview-cards__preview h2 {
  margin: 0;
  color: var(--color-faragalla-ink);
  font-family: var(--font-body);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0;
}

.h2-preview-cards__preview p {
  margin: 20px 0 0;
  color: var(--color-faragalla-ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.h2-preview-cards__details {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.h2-preview-cards__detail {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
}

.h2-preview-cards__detail h3 {
  margin: 0;
  color: var(--color-faragalla-ink);
  font-size: 15px;
  line-height: 1.35;
}

.h2-preview-cards__detail > p {
  margin: 8px 0 0;
  color: var(--color-faragalla-ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.h2-preview-cards__subdetails {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.h2-preview-cards__subdetail h4,
.h2-preview-cards__subdetail h5,
.h2-preview-cards__subdetail h6 {
  margin: 0;
  color: var(--color-faragalla-ink);
  font-size: 13px;
  line-height: 1.35;
}

.h2-preview-cards__subdetail h5 {
  font-size: 12px;
}

.h2-preview-cards__subdetail h6 {
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.h2-preview-cards__subdetail p {
  margin: 6px 0 0;
  color: var(--color-faragalla-ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.h2-preview-cards__close,
.h2-preview-cards__arrow {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.42);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition:
    transform var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out);
}

.h2-preview-cards__close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 30px;
  line-height: 1;
}

.h2-preview-cards__arrow {
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
}

.h2-preview-cards__arrow--prev {
  left: 18px;
}

.h2-preview-cards__arrow--next {
  right: 18px;
}

.h2-preview-cards__close:hover,
.h2-preview-cards__close:focus-visible,
.h2-preview-cards__arrow:hover,
.h2-preview-cards__arrow:focus-visible {
  background: rgba(0, 0, 0, 0.66);
}

.h2-preview-cards__arrow:hover,
.h2-preview-cards__arrow:focus-visible {
  transform: translateY(-50%) scale(1.05);
}

.h2-preview-cards__close:focus-visible,
.h2-preview-cards__arrow:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

body.h2-preview-cards-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .h2-preview-cards__grid {
    flex-direction: column;
  }

  .h2-preview-cards__card {
    flex: none;
    min-height: 380px;
  }

  .h2-preview-cards__label-wrap {
    right: 18px;
    bottom: 18px;
    left: 18px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .h2-preview-cards__label {
    width: 100%;
    font-size: 22px;
    white-space: normal;
    text-wrap: balance;
  }

  .h2-preview-cards__modal {
    padding: 24px;
  }
}

@media (max-width: 560px) {
  .h2-preview-cards {
    padding: 70px 0;
  }

  .h2-preview-cards__modal {
    padding: 16px;
  }

  .h2-preview-cards__preview-shell {
    border-radius: 22px;
  }

  .h2-preview-cards__preview-content {
    width: calc(100% - 32px);
    margin-top: -72px;
    padding: 30px 0 124px;
    text-shadow: 0 1px 22px rgba(255, 255, 255, 0.9);
  }

  .h2-preview-cards__arrow {
    top: auto;
    bottom: 18px;
    width: 46px;
    height: 46px;
    transform: none;
  }

  .h2-preview-cards__arrow:hover,
  .h2-preview-cards__arrow:focus-visible {
    transform: scale(1.05);
  }
}