.offer-carousel-cont {
  border-radius: var(--Carousel-Offer-Radius, 16px);

  & .swiper-wrapper {
    display: flex;
    justify-content: space-between;
    padding: var(--Carousel-Offer-Vertical-Padding, 16px) var(--Carousel-Offer-Horizontal-Padding, 12px);
    align-items: center;
    background: var(--Carousel-Offer-Background, #F9F9F7);
    width: unset;
    gap: var(--Carousel-Offer-Gap, 8px);
    border-radius: var(--Carousel-Offer-Radius, 16px);

    & .offer-carousel-card {
      display: flex;
      width: 50%;
      flex-direction: row;
      align-items: center;
      gap: var(--Card-Offer-Card-Gap, 16px);
      flex-shrink: 0;

      & picture {
        display: flex;
        width: 80px;
        height: 80px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;

        & img {
          width: 100%;
          height: 100%;
          border-radius: var(--Card-Offer-Card-Radius-Image-D-Ds, 8px);
          object-fit: cover;
        }

      }

      & .offer-card-text-cont {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: var(--Card-Offer-Card-Text-Gap, 12px);
        flex: 1 0 0;

        & h1, h2, h3, h4, h5, h6, p {
          color: var(--Card-Offer-Card-Text, #001C35);
          font: var(--Body-Strong);
        }
      }
    }
  }
}

@media (width >= 1200px) {
  .offer-carousel-cont {
    & .swiper-wrapper {
      & .offer-carousel-card:last-child {
        padding-right: var(--Carousel-Offer-Horizontal-Padding, 0.75rem);
      }
    }
  }
}

@media (width < 1200px) {
  .offer-carousel-container.mobile-offer-carousel {
    width: 100%;
  }

  .offer-carousel-cont {
    min-height: 1px;

    & .swiper-wrapper {
      padding: unset;
      justify-content: normal;
      align-items: stretch;

      & .offer-carousel-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: unset;
        max-width: 364px;
        height: auto;

        & picture {
          height: 273px;
          width: 100%;
          justify-content: center;
          align-items: center;
          align-self: stretch;

          & img {
            border-radius: var(--Card-Offer-Card-Radius-Image-Tp-M, 24px);
          }
        }

        & .offer-card-text-cont {
          justify-content: space-between;
        }
      }
    }

    & .scroll-indicator {
      padding-top: var(--Carousel-Widget-Gap-M-Tp, 40px);
    }
  }
}

@media (width < 768px) {
  .offer-carousel-cont {
    & .swiper-wrapper {
      & .offer-carousel-card {
        max-width: 285px;
      }
    }
  }
}