.teaser.block {
  --teaser-default-min-height-mobile: 23.4375rem;
  --teaser-default-min-height-desktop: 42.5625rem;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;

  .teaser-background {
    position: absolute;
    width: 100%;
    inset: 0;
    z-index: 1;
    flex-shrink: 0;
    box-sizing: border-box;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .teaser-foreground {
    position: relative;
    z-index: 1;
    top: 0;
    width: 100%;
    align-items: center;
    padding: var(--spacing-6) var(--spacing-3);
    color: var(--color-spinach);
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    font-family: var(--text-app-h2-font);
    flex-direction: column;
    gap: var(--spacing-15);

    > div {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-6);
      justify-content: center;
      width: 100%;
      flex-grow: 1;
    }

    .teaser-eyebrow {
      font-size: var(--text-body-md-size);
      margin: var(--spacing-0);

      img {
        width: 42px;
        height: 42px;
      }
    }

    .teaser-title :where(h1, h2, h3, h4, h5, h6) {
      margin: var(--spacing-0);
      font-family: var(--text-app-h2-font);
    }

    .teaser-cta {
      display: flex;
      flex-flow: row wrap;
      gap: var(--spacing-4);

    .btn {
        min-height: var(--spacing-12);
        box-sizing: border-box;
        line-height: var(--text-cta-mobile-line-height);
        font-size: var(--text-cta-mobile-size);
        font-weight: var(--text-cta-mobile-weight);
        letter-spacing: var(--text-cta-mobile-spacing);
      }
    }
  }

  &.teaser-50-50,
  &.teaser-40-60 {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .foreground {
      height: auto;
    }

    .teaser-background {
      position: relative;

      img {
        height: 100%;
      }
    }
  }

  &.text-bottom .teaser-foreground > .text {
    justify-content: flex-end;
  }

  &.text-top .teaser-foreground > .text {
    justify-content: flex-start;
  }

  &.default .teaser-foreground {
    min-height: var(--teaser-default-min-height-mobile);
  }

  &.background-spinach-green {
    .teaser-foreground {
      background: var(--color-spinach);
      color: var(--color-neutral-light-cream);
    }
  }

  &.background-subway-green {
    .teaser-foreground {
      background: var(--color-subway-green);
      color: var(--color-neutral-light-cream);
    }
  }

  &.background-white {
    .teaser-foreground {
      background: var(--color-neutral-white);
      color: var(--color-neutral-black);
    }
  }

  .teaser-background:has(img) + .teaser-foreground {
    color: var(--color-neutral-light-cream);
  }

  .teaser-background:has(img:not([src^="about:error"])) {
    line-height: 0;
  }

  &.background-dark-cream:is(.teaser-50-50, .teaser-40-60) {
    .teaser-foreground {
      background: var(--color-neutral-dark-cream);
      color: var(--color-spinach);
    }
  }

  &.teaser:is(.teaser-40-60, .teaser-50-50):not(.background-spinach-green, .background-subway-green)
    .teaser-foreground {
    color: var(--color-spinach);
  }

  .teaser-description {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);

    a:any-link:not(.btn),
    a:hover:not(.btn) {
      color: inherit;
    }
  }

  &.video-bg {
    .teaser-background {
      video {
        aspect-ratio: 5 / 1.92;
        object-fit: cover;
        object-position: center;
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .btn-icon.pause,
    .btn-icon.play {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 2;

      img {
        width: 30px;
        height: 15px;
      }

      &:hover,
      &:active,
      &:focus {
        background: transparent;
      }
    }

    .btn-icon.play {
      display: none;
    }
  }
}

@media (width <= 1024px) {
  .teaser.block .teaser-foreground > div {
    gap: var(--spacing-4);
  }

  .teaser.block .teaser-foreground .teaser-eyebrow {
    line-height: var(--text-body-md-mobile-line-height);
    letter-spacing: var(--text-body-md-mobile-spacing);
  }

  .teaser.block .teaser-foreground .teaser-description {
    margin-top: var(--spacing-2);
  }

  .teaser.block .teaser-foreground .teaser-cta {
    margin-top: var(--spacing-2);
  }

  .teaser.block.cta-mobile-full-width .teaser-foreground .teaser-cta {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-2);
  }

  .teaser.block.mb-flex-reverse {
    flex-direction: column-reverse;
  }
}

@media (width >= 1024px) {
  .teaser.block {
    .teaser-foreground {
      padding: var(--spacing-15);

      .teaser-cta {
        margin-top: var(--spacing-4);
      }
    }

    &.default {
      .teaser-foreground {
        min-height: var(--teaser-default-min-height-desktop);
        max-width: 60%;
      }
    }

    &.teaser-50-50,
    &.teaser-40-60 {
      flex-direction: row-reverse;

      &.text-right {
        flex-direction: row;
      }

      .teaser-background,
      .teaser-foreground {
        width: 50%;
      }

      .teaser-background {
        width: 50%;

        img {
          height: 100%;
        }
      }
    }

    &.teaser-40-60 {
      .teaser-background,
      .teaser-foreground {
        width: 40%;
      }

      .teaser-background {
        width: 60%;
      }
    }

    &.text-right:not(.teaser-50-50, .teaser-40-60) {
      .teaser-foreground {
        margin-left: auto;
      }
    }
  }
}