/* Tabs value background overrides for promo */
@media print, screen and (min-width: 64.0625em) {
  .page--home .tabs--value + .promo-banner::before,
  .page--home-page .tabs--value + .promo-banner::before {
    background-color: var(--gradient-blue--dark);
    background-image: url("/themes/custom/holyoke/components/section/promo-section/assets/flourette-pattern.png");
    background-size: 100px;
    background-attachment: fixed;
  }
}
@media print, screen and (max-width: 74.9375em) {
  .page--home .tabs--value::before,
  .page--home-page .tabs--value::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 17vw;
    background-color: var(--white);
  }
  .page--home.has-promo .tabs--value::before,
  .page--home-page.has-promo .tabs--value::before {
    background-color: var(--gradient-blue--dark);
    background-image: url("/themes/custom/holyoke/components/section/promo-section/assets/flourette-pattern.png");
    background-size: 100px;
    background-attachment: fixed;
  }
}

@media print, screen and (min-width: 64.0625em) {
  .page--home .tabs--value + .promo-banner::before,
  .page--home-page .tabs--value + .promo-banner::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 17vw;
  }
}
@media print, screen and (min-width: 64.0625em) {
  .page--home .tabs--value + .promo-banner::before {
    -webkit-clip-path: url(/themes/custom/holyoke/components/section/promo-section/);
    clip-path: url(/themes/custom/holyoke/components/section/promo-section/);
  }
}
@media print, screen and (min-width: 64.0625em) {
  .page--home .tabs--value + .promo-banner,
  .page--home-page .tabs--value + .promo-banner {
    margin-top: -3vw;
  }
}
.promo-banner {
  padding-top: var(--spacing--large);
  padding-bottom: var(--spacing--large);
  margin-top: var(--spacing--4xlarge);
  background-color: var(--gradient-blue--dark);
  background-image: url("/themes/custom/holyoke/components/section/promo-section/assets/flourette-pattern.png");
  background-size: 100px;
  background-attachment: fixed;
}

@media print, screen and (min-width: 48.0625em) {
  .promo-banner {
    padding-top: var(--spacing--2xlarge);
    padding-bottom: var(--spacing--2xlarge);
  }
}

.promo-banner .grid-x {
  display: flex;
  align-items: center;
}

.promo-banner .content-inner {
  max-width: 733px;
}

.promo-banner .content-inner a {
  color: var(--white);
  text-decoration: underline;
}
.promo-banner .content-inner a:hover,
.promo-banner .content-inner a:focus {
  color: var(--brand--bright-blue);
}

.promo-banner .button-group {
  list-style: none;
  margin-top: var(--spacing--medium);
  padding: 0;
}

.promo-banner .button-group li {
  display: inline-block;
}
.promo-banner .button-group li:not(:last-of-type) {
  margin-right: 10px;
}

.promo-banner .button-group .btn {
  background: transparent;
  border-color: var(--brand--bright-blue);
  color: var(--white);
  cursor: pointer;
  text-align: center;
  width: 100%;
  font-size: 14px;
  transition:
    background var(--primary-transition),
    border-color var(--primary-transition),
    color var(--primary-transition);
}

@media print, screen and (min-width: 48.0625em) {
  .promo-banner .button-group .btn {
    font-size: 1em;
  }
}

.promo-banner .button-group .btn:hover,
.promo-banner .button-group .btn:focus,
.promo-banner .button-group .btn:focus-visible {
  background: var(--pattern--fuchsia);
  border-color: var(--pattern--fuchsia);
}

.promo-banner .button-group .btn::after {
  font-family: var(--font-awesome);
  content: "\f178";
  color: var(--white);
  right: 27px;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--primary-transition);
  pointer-events: none;
}

@media print, screen and (max-width: 40em) {
  .promo-banner .button-group .btn::after {
    right: 0.5em;
  }
}

.promo-banner .button-group .btn:hover::after,
.promo-banner .button-group .btn:focus::after {
  opacity: 1;
}

.promo-banner .button-group .btn:last-of-type {
  margin-bottom: 0;
}

.promo-banner p {
  font-size: 18px;
  color: var(--white);
}

.promo-banner h2 {
  margin-bottom: var(--spacing--medium);
  color: var(--white);
  font-size: 28px;
  font-weight: 600;
}

@media print, screen and (min-width: 48.0625em) {
  .promo-banner h2 {
    font-size: 2.75em;
  }
}

.promo-banner .promo-banner__photo {
  margin-bottom: var(--spacing--medium);
  max-width: 250px;
  width: 100%;
}
.promo-banner .promo-banner__photo .aspect-ratio-frame {
  --aspect-ratio: 1.265;
}
@media print, screen and (max-width: 40em) {
  .promo-banner .promo-banner__photo {
    display: none;
    visibility: hidden;
  }
}
@media print, screen and (min-width: 48.0625em) {
  .promo-banner .promo-banner__photo {
    margin-right: var(--spacing--medium);
    margin-bottom: 0;
    max-width: 16.25em;
  }
}

/* Solid component variant link styles */
.promo-banner.solid-component .content-inner p a {
  color: var(--white);
  text-decoration: underline;
}
.promo-banner.solid-component .content-inner p a:hover,
.promo-banner.solid-component .content-inner p a:focus {
  color: var(--brand--bright-blue);
  text-decoration: none;
}
.page--home .tabs--value + .promo-banner,
.page--home-page .tabs--value + .promo-banner {
  z-index: 3 !important;
}