.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: var(--banner-justify, flex-end);
  align-items: var(--banner-align, flex-start);
  height: 100%;
  min-height: var(--banner-min-h-mobile, 13.75rem);
  padding: 1.375rem;
  overflow: hidden;
  border-radius: var(--bike-radius-card);
  text-align: var(--banner-text-align, left);
  isolation: isolate;
}

@media (min-width: 768px) {
  .cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner {
    min-height: var(--banner-min-h, 16.25rem);
    padding: var(--banner-pad, 1.75rem);
    border-radius: var(--bike-radius-block);
  }
}

/* Themes */
.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner--dark {
  background: var(--bike-navy);
  color: var(--bike-white);
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner--darker {
  background: var(--bike-navy-dark);
  color: var(--bike-white);
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner--light {
  background: var(--bike-surface);
  color: var(--bike-text);
}

/* Image fills the card behind the text */
.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner:hover .bike-banner__img {
  transform: scale(1.03);
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner.has-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(29, 38, 51, 0.6), rgba(29, 38, 51, 0.1) 70%);
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__content {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 0.5rem;
  max-width: var(--banner-content-max, 26rem);
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__eyebrow {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bike-on-dark-accent);
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner--light .bike-banner__eyebrow {
  color: var(--bike-red-text);
}

/* Title size is chosen by the parent section (dynamic), hence the variable font-size here. */
.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__title {
  margin: 0;
  font-size: var(--banner-title-size-mobile, 1.5rem);
  line-height: 1.1;
}

@media (min-width: 768px) {
  .cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__title {
    font-size: var(--banner-title-size, 1.625rem);
  }
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__title a {
  color: inherit;
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__subtitle {
  margin: 0;
  max-width: 22.5rem;
  color: var(--bike-on-dark);
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner--light .bike-banner__subtitle {
  color: var(--bike-text-banner);
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__button {
  margin-top: 0.375rem;
}

/* One link per banner, stretched over the whole card */
.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__stretched:focus-visible {
  outline: none;
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner__stretched:focus-visible::after {
  outline: 2px solid var(--bike-white);
  outline-offset: -4px;
  border-radius: inherit;
}

.cc_J2aTpvNHJ1_zr61BPeOHM .bike-banner--light .bike-banner__stretched:focus-visible::after {
  outline-color: var(--bike-navy);
}