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

.abstract-image-section {
  // @include abstract.debug();
  $this: &;
  color: var(--gray-700);

  &__content {
    margin-bottom: 24px;
  }

  .cds-star-rating {
    margin-bottom: 24px;
  }

  blockquote {
    margin-bottom: 32px;
    -webkit-margin-start: 0;
    margin-inline-start: 0;
    -webkit-margin-end: 0;
    margin-inline-end: 0;
    font-size: abstract.rem(token.$font-size-4);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    white-space: pre-wrap;
  }

  em {
    display: block;
    margin-bottom: 4px;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  }

  cite {
    display: block;
  }

  cite span {
    font-size: abstract.rem(token.$font-size-1);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-0);
    color: var(--gray-500);
  }

  &__carousel {
    // @include abstract.absolute();
    margin-bottom: 48px;

    .cds-carousel-arrow:last-of-type {
      margin-left: 16px;
    }
  }

  .swiper-slide {
    width: 100% !important;
    background: #fff;
  }

  &__img {
    border-radius: 16px;
    overflow: hidden;

    img {
      vertical-align: top;
      width: 100%;
    }
  } // img

  @include abstract.media-bp-up('md') {
    display: flex;
    justify-content: space-between;

    &__slide {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 64px;
    } // slide

    blockquote {
      margin-top: 0;
      font-size: token.$font-size-6;
    }

    &__carousel {
      @include abstract.relative();

      z-index: 5;
      flex: none;
      display: flex;
      align-items: flex-end;
      transform: translateX(-110px);
      margin-top: 0;
      margin-bottom: 0;
    }

    &__img img {
      max-width: 576px;
    }
  } // md
}

@include abstract.media-bp-down('md') {
  // builder-block용
  // =======================
  .builder-block {
    .abstract-image-section__content,
    .abstract-image-section em {
      margin-bottom: 0;
    }
  }
}