.banner-nudge {
  position: relative;
  overflow: hidden;

  .banner-nudge__media {
    position: relative;

    picture,
    img {
      width: 100%;
      height: auto;
      aspect-ratio: 160 / 87;
      object-fit: cover;
      display: block;

      @media (width >= 768px) {
        aspect-ratio: 467 / 126;
      }
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(76deg, var(--gradient-medium-blue-color) 20.24%, var(--gradient-black-color) 101.49%);
      z-index: 1;
      pointer-events: none;
    }
  }

  .banner-nudge__content {
    position: absolute;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    color: var(--tertiary-color);
    height: 100%;
    width: 100%;
    padding: var(--spacing-medium);

    @media (width >= 768px) {
      gap: var(--spacing-medium);
    }

    .banner-nudge__text {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);

      @media (width >= 768px) {
        gap: var(--spacing-xsmall);
      }

      .banner-nudge__title {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-size: var(--fs-small);
          font-weight: var(--fw-500);
          line-height: var(--lh-small);
          letter-spacing: -0.21px;

          @media (width >= 768px) {
            font-size: var(--fs-xxlarge);
            font-weight: var(--fw-400);
            line-height: var(--lh-xxxlarge);
            letter-spacing: -0.48px;
          }
        }
      }

      .banner-nudge__subtitle {
        font-feature-settings: var(--font-settings);
        font-size: 0.8rem;
        font-weight: var(--fw-400);
        line-height: 1.2rem;
        margin-bottom: 0;

        @media (width >= 768px) {
          font-size: var(--fs-small);
          font-weight: var(--fw-300);
          line-height: var(--lh-medium);
          margin-bottom: 0;
        }
      }
    }

    .banner-nudge__cta {
      .car-teaser__button { 
        width: fit-content;
        font-feature-settings: var(--font-settings);
        padding: var(--spacing-xs) var(--spacing-medium);
        text-align: center;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-400);
        line-height: var(--lh-small);

        @media (width >= 768px) {
          font-size: var(--fs-small);
          line-height: var(--line-height-body-low);
          border: 1px solid var(--tertiary-color);
        }
      }
    }
  }
}

body.clp.appear {
  .banner-nudge {
    background: var(--color-neutral-light-100);

    @media (width >= 768px) {
      margin-block: var(--spacing-big);
    }

    @media (width >= 1024px) {
      margin-block: 50px;
    }

    .banner-nudge__media {
      float: right;

      &::after {
        inset: 0;
        background: linear-gradient(135deg, var(--gradient-overlay-light-95) 0%, var(--gradient-overlay-light-85) 100%);
        z-index: 2;
      }

      picture,
      img {
        max-width: 235px;
        min-height: 223px;
        aspect-ratio: 235 / 223;

        @media (width >= 768px) {
          max-width: 442.412px;
          min-height: 181.687px;
          aspect-ratio: 442.412 / 181.687;
        }

        @media (width >= 1024px) {
          max-width: 787px;
          min-height: 323px;
          aspect-ratio: 787 / 323;
        }
      }
    }

    .banner-nudge__content {
      padding: var(--spacing-big) var(--container-margin) 31px;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-medium);

      @media (width >= 768px) {
        gap: 13px;
        padding-inline: var(--container-margin) 0;
        padding-block: 0;
        justify-content: center;
        align-items: flex-start;
      }

      @media (width >= 1024px) {
        gap: var(--spacing-medium);
      }

      .banner-nudge__text {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);

        @media (width >= 768px) {
          gap: 9px;
        }

        @media (width >= 1024px) {
          gap: var(--spacing-small);
        }

        .banner-nudge__title {
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            color: var(--neutrals-sub-texts-paragraphs);
            font-size: var(--fs-xlarge);
            font-weight: var(--fw-400);
            line-height: var(--lh-normal);

            @media (width >= 768px) {
              font-size: var(--fs-large);
            }

            @media (width >= 1024px) {
              font-size: 4.2rem;
            }
          }
        }

        .banner-nudge__subtitle {
          color: var(--subtitle-dark-gray);
          font-size: var(--fs-small);
          font-weight: var(--fw-300);
          line-height: 1.7rem;
          letter-spacing: -0.21px;

          @media (width >= 768px) {
            color: var(--color-overlay-dark);
            font-size: var(--fs-xsmall);
            font-weight: var(--fw-400);
            line-height: 1.3rem;
            letter-spacing: -0.18px;
          }

          @media (width >= 1024px) {
            font-size: var(--fs-small);
            font-weight: var(--fw-300);
            line-height: 1.5rem;
            letter-spacing: -0.21px;
          }
        }
      }

      .banner-nudge__cta {
        .car-teaser__button {
          border: none;
          color: var(--secondary-color);
          padding: var(--spacing-xsmall) var(--spacing-small);
          text-align: center;
          font-size: var(--fs-small);
          min-width: 152px;
          min-height: 34px;
          box-sizing: border-box;
          line-height: 1.2;

          @media (width >= 768px) {
            min-width: 170px;
            min-height: 32px;
            padding: 7.6px 15px;
            font-size: 1.35rem;
            font-weight: var(--fw-400);
            line-height: 1.7rem;
          }

          @media (width >= 1024px) {
            min-width: 157px;
            min-height: 40px;
            padding: 11px var(--spacing-small);
            font-size: var(--fs-medium);
            font-weight: var(--fw-400);
            line-height: var(--lh-small);
          }
        }
      }
    }
  }
}