@use '../../base/variable';
@use '../../base/token';
@use '../../abstract';

.cds-cta-section .split-image-02 {
  display: grid;
  gap: 48px;

  &__img {
    order: 2;
    width: max(343px, 100%);
    height: 280px;
    overflow: hidden;
    border-radius: 0;

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

  .cds-cta-section__title {
    margin-block-end: 0;
    font-size: token.$font-size-6;
  }

  &__sub-heading {
    font-size: token.$font-size-1;
    line-height: token.$line-heights-8 + px;
    color: var(--secondary-gray-blue-450);
  }

  &__heading-and-check-items {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-block-end: 32px;
  }

  &__heading-wrap {
    display: flex;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }

  .cds-cta-section__btn-wrap {
    justify-content: flex-start;
  }

  @include abstract.media-bp-up('md') {
    display: flex;
    align-items: center;
    gap: 64px;
    max-width: variable.$max-width;
    padding: 0 32px;
    margin-inline: auto;

    &__img {
      order: initial;
      width: max(576px, 100%);
      height: 470px;
      border-radius: 24px;
    }

    &__content {
      width: max(576px, 100%);
      min-height: 400px;
      padding-right: 32px;
    }

    &__heading-wrap {
      display: flex;
      font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
      flex-direction: column;
      gap: 12px;
    }

    &__sub-heading {
      font-size: token.$font-size-2;
      line-height: token.$line-heights-7 + px;
    }

    .cds-cta-section__title {
      line-height: token.$line-heights-3 + px;
      font-size: token.$font-size-7;
    }

    &__heading-and-check-items {
      margin-block-end: 40px;
    }
  }
}

.cds-cta-section--dark .split-image-02 {
  &__sub-heading {
    color: var(--secondary-gray-blue-100);
  }

  .cds-check-item__text {
    color: var(--gray-200);
  }
}