/* Three promo boxes under the slider.
 *
 * The middle one is an information panel, not a destination: no anchor, no
 * cursor change, no hover. Making it look clickable and then not moving would
 * be worse than making it plainly static.
 */

.cc_vt72n7bb_YAs92Wol7R .ofs-promo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ofs-space-3);
  /* 88% of the container, so every box is about 12% smaller at every width.
   * Width rather than ratio: the artwork is exactly 4:5, and a squarer frame
   * would crop a fifth of each picture. */
  width: 88%;
  margin-inline: auto;
}

.cc_vt72n7bb_YAs92Wol7R .ofs-promo__box {
  display: flex;
  flex-direction: column;
  gap: var(--ofs-space-2);
  color: var(--ofs-text);
  text-decoration: none;
  /* The reveal: content arrives from just below, once. */
}

/* Visible by default; the arrival only plays once the section is in view. */
.cc_vt72n7bb_YAs92Wol7R .ofs-promo--in .ofs-promo__box {
  animation: cc_vt72n7bb_YAs92Wol7R_ofs-promo-in var(--ofs-duration-reveal) var(--ofs-ease) backwards;
}

@keyframes cc_vt72n7bb_YAs92Wol7R_ofs-promo-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.cc_vt72n7bb_YAs92Wol7R .ofs-promo__box--static {
  cursor: default;
}

.cc_vt72n7bb_YAs92Wol7R .ofs-promo__media {
  position: relative;
  /* 4/5, matching the product cards — one ratio family across the page. */
  aspect-ratio: 4 / 5;
}

/* Readability scrim, only where a name sits on the photo. The brief bans
 * decorative gradients; this one exists so the text can be read, and the
 * middle box — which carries no name — never gets it. */
.cc_vt72n7bb_YAs92Wol7R .ofs-promo__media--labelled::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(28, 27, 25, 0) 0%,
    rgba(28, 27, 25, 0.55) 100%
  );
  pointer-events: none;
}

.cc_vt72n7bb_YAs92Wol7R .ofs-promo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ofs-duration-card) var(--ofs-ease);
}

/* Only the two side boxes respond — the middle one stays put. */
.cc_vt72n7bb_YAs92Wol7R .ofs-promo__box:not(.ofs-promo__box--static):hover {
  transform: translateY(-4px);
}

.cc_vt72n7bb_YAs92Wol7R .ofs-promo__box:not(.ofs-promo__box--static):hover .ofs-promo__img {
  transform: scale(1.04);
}

.cc_vt72n7bb_YAs92Wol7R .ofs-promo__title {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: var(--ofs-z-content);
  /* --ofs-on-dark rather than #fff: the palette has no pure white. */
  color: var(--ofs-on-dark);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Phones: closer to the category strip above. Its 32px plus these 21px make
 * 53, a third less than the 80 it was. 768px and up keeps the section's 48. */
@media (max-width: 767px) {
  .cc_vt72n7bb_YAs92Wol7R .ofs-section.ofs-promo {
    padding-top: 1.3125rem;
  }
}

@media (min-width: 768px) {
  .cc_vt72n7bb_YAs92Wol7R .ofs-promo__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Fewer boxes than three: keep the row balanced instead of leaving a hole
   * on the right. A single box does not stretch across the full width. */
  .cc_vt72n7bb_YAs92Wol7R .ofs-promo__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc_vt72n7bb_YAs92Wol7R .ofs-promo__grid--one {
    grid-template-columns: minmax(0, 32rem);
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_vt72n7bb_YAs92Wol7R .ofs-promo--in .ofs-promo__box {
    animation: none;
  }

  .cc_vt72n7bb_YAs92Wol7R .ofs-promo__box, .cc_vt72n7bb_YAs92Wol7R .ofs-promo__box:hover, .cc_vt72n7bb_YAs92Wol7R .ofs-promo__img, .cc_vt72n7bb_YAs92Wol7R .ofs-promo__box:hover .ofs-promo__img {
    transform: none;
  }
}