.tolin-image-banner {
  --tolin-banner-navy: #204a5f;
  --tolin-banner-navy-deep: #173b4d;
  --tolin-banner-green: #01a64f;
  --tolin-banner-sage: #dce9e3;
  --tolin-banner-cream: #f4f7f5;
  inline-size: calc(100% - clamp(3.2rem, 6vw, 9.6rem));
  max-inline-size: 150rem;
  min-block-size: clamp(52rem, 60vw, 68rem);
  margin-block: clamp(4rem, 7vw, 9rem);
  margin-inline: auto;
  overflow: hidden;
  border: 0.1rem solid rgba(32, 74, 95, 0.12);
  border-radius: clamp(2rem, 3vw, 3.6rem);
  background:
    radial-gradient(circle at 15% 20%, rgba(1, 166, 79, 0.11), transparent 25%),
    linear-gradient(135deg, #eef4f1 0%, var(--tolin-banner-cream) 48%, #e1ece8 100%);
  box-shadow: 0 3rem 8rem rgba(23, 59, 77, 0.13);
}

.tolin-image-banner::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset-inline-start: 42%;
  inset-block: -35% auto;
  inline-size: 65rem;
  block-size: 65rem;
  border: 0.1rem solid rgba(32, 74, 95, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 7rem rgba(32, 74, 95, 0.025), 0 0 0 14rem rgba(1, 166, 79, 0.025);
}

.tolin-image-banner::after {
  inset-inline: 0 auto;
  inline-size: 56%;
  background: linear-gradient(90deg, var(--tolin-banner-navy-deep), var(--tolin-banner-navy), transparent);
}

[dir='rtl'] .tolin-image-banner::after {
  inset-inline: auto 0;
  background: linear-gradient(270deg, var(--tolin-banner-navy-deep), var(--tolin-banner-navy), transparent);
}

.tolin-image-banner .banner__media {
  z-index: 1;
  inset-block: 8% auto;
  inset-inline: auto 4%;
  inline-size: 28%;
  block-size: 84%;
  overflow: hidden;
  border: 0.8rem solid rgba(255, 255, 255, 0.88);
  border-radius: 2.4rem;
  background: #fff;
  box-shadow: 0 2.2rem 5rem rgba(23, 59, 77, 0.18);
  transform: rotate(2deg);
}

.tolin-image-banner.tolin-image-banner--split .banner__media:first-of-type {
  inset-block-start: 15%;
  inset-inline-end: 28%;
  inline-size: 25%;
  block-size: 70%;
  transform: rotate(-3deg);
}

[dir='rtl'] .tolin-image-banner .banner__media {
  transform: rotate(-2deg);
}

[dir='rtl'] .tolin-image-banner.tolin-image-banner--split .banner__media:first-of-type {
  transform: rotate(3deg);
}

.tolin-image-banner .banner__media img,
.tolin-image-banner .banner__media .placeholder-svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  background: #fff;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tolin-image-banner .banner__media.animate--fixed > img,
.tolin-image-banner .banner__media.animate--zoom-in > img {
  position: absolute;
  inline-size: 100%;
  block-size: 100%;
}

.tolin-image-banner:hover .banner__media img {
  transform: scale(1.025);
}

.tolin-image-banner .banner__content {
  z-index: 2;
  align-items: center;
  justify-content: flex-start;
  padding-block: clamp(4rem, 7vw, 8rem);
  padding-inline: clamp(2.4rem, 6vw, 8rem);
  text-align: start;
}

.tolin-image-banner .banner__box,
.tolin-image-banner.banner--desktop-transparent .banner__box {
  inline-size: min(48%, 62rem);
  min-inline-size: 0;
  max-inline-size: 62rem;
  padding: clamp(3rem, 4.5vw, 5.6rem);
  border: 0.1rem solid rgba(255, 255, 255, 0.18);
  border-radius: 2.4rem;
  background: rgba(23, 59, 77, 0.94);
  box-shadow: 0 2.4rem 6rem rgba(23, 59, 77, 0.24);
  color: #fff;
  text-align: start;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
}

.tolin-image-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  color: #5ee99f;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
}

.tolin-image-banner__eyebrow::before {
  content: '';
  inline-size: 2.8rem;
  block-size: 0.3rem;
  border-radius: 999px;
  background: currentColor;
}

.tolin-image-banner .banner__heading {
  max-inline-size: 12ch;
  color: #fff;
  font-size: clamp(3.6rem, 4.4vw, 6.4rem);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1;
}

.tolin-image-banner .banner__text {
  max-inline-size: 48rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.45rem, 1.5vw, 1.75rem);
  line-height: 1.65;
}

.tolin-image-banner .banner__buttons {
  gap: 1.2rem;
  margin-block-start: 2.8rem;
}

.tolin-image-banner .button {
  min-block-size: 5.2rem;
  padding-inline: 2.8rem;
  border-radius: 999px;
  font-weight: 750;
}

.tolin-image-banner .button--primary {
  background: var(--tolin-banner-green);
  color: #fff;
  box-shadow: 0 1.2rem 2.8rem rgba(1, 166, 79, 0.28);
}

.tolin-image-banner .button--primary::after {
  box-shadow: none;
}

.tolin-image-banner .button--secondary {
  --alpha-button-background: 0;
  --color-button-text: 255, 255, 255;
  border: 0.1rem solid rgba(255, 255, 255, 0.5);
  color: #fff;
}

@media screen and (max-width: 989px) {
  .tolin-image-banner {
    min-block-size: 58rem;
  }

  .tolin-image-banner .banner__box,
  .tolin-image-banner.banner--desktop-transparent .banner__box {
    inline-size: min(56%, 52rem);
  }

  .tolin-image-banner .banner__media {
    inset-inline-end: 2%;
    inline-size: 30%;
  }

  .tolin-image-banner.tolin-image-banner--split .banner__media:first-of-type {
    inset-inline-end: 26%;
    inline-size: 28%;
  }
}

@media screen and (max-width: 749px) {
  .tolin-image-banner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: calc(100% - 3.2rem);
    min-block-size: 0;
    margin-block: 4.8rem;
    border-radius: 2.4rem;
  }

  .tolin-image-banner::before,
  .tolin-image-banner::after {
    display: none;
  }

  .tolin-image-banner .banner__media,
  .tolin-image-banner.tolin-image-banner--split .banner__media:first-of-type {
    position: relative;
    inset: auto;
    grid-row: 1;
    inline-size: calc(100% - 1rem);
    block-size: 30rem;
    margin: 1.6rem 0 0;
    border-width: 0.5rem;
    border-radius: 1.6rem;
    transform: none;
  }

  [dir='rtl'] .tolin-image-banner .banner__media,
  [dir='rtl'] .tolin-image-banner.tolin-image-banner--split .banner__media:first-of-type {
    transform: none;
  }

  .tolin-image-banner .banner__media:first-of-type {
    grid-column: 1;
    margin-inline-start: 1.6rem;
  }

  .tolin-image-banner .banner__media:nth-of-type(2) {
    grid-column: 2;
    margin-inline-end: 1.6rem;
  }

  .tolin-image-banner .banner__content {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 2;
    min-block-size: 0;
    padding: 1.6rem;
  }

  .tolin-image-banner .banner__box,
  .tolin-image-banner.banner--desktop-transparent .banner__box,
  .tolin-image-banner:not(.banner--mobile-bottom) .banner__box,
  .tolin-image-banner.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    inline-size: 100%;
    max-inline-size: none;
    padding: 3.2rem 2.4rem;
    border-radius: 1.8rem;
    background: var(--tolin-banner-navy-deep);
    color: #fff;
  }

  .tolin-image-banner .banner__heading {
    font-size: clamp(3.4rem, 10vw, 4.8rem);
  }

  .tolin-image-banner .banner__buttons {
    inline-size: 100%;
  }

  .tolin-image-banner .banner__buttons .button {
    flex: 1 1 18rem;
    min-inline-size: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tolin-image-banner .banner__media img {
    transition: none;
  }
}