.offer-banner__wrapper {
  padding: var(--sizing-xl) var(--sizing-l);
  overflow: hidden;

  @media (width>=1024px) {
    margin: auto;
    padding: 50px var(--container-margin);
  }

  .offer-banner-item {
    position: relative;
    overflow: hidden;

    .offer-banner__media {
      position: relative;

      .offer-banner__link {
        cursor: pointer;
      }

      picture,
      img {
        width: 100%;
        height: auto;
        aspect-ratio: 750 / 483;
        display: block;

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

      &.offer-banner-item--with-text::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, #000 15.38%, rgba(0 0 0 / 10%) 83.51%);
        z-index: 1;
        pointer-events: none;

        @media (width >= 768px) {
          background: linear-gradient(90deg, #000 15.38%, rgba(0 0 0 / 10%) 83.51%);
        }
      }
    }

    .offer-banner__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-38) var(--sizing-l);
      text-align: center;

      @media (width >= 768px) {
        gap: var(--spacing-18);
        text-align: left;
        justify-content: center;
      }

      .offer-banner__text {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-6);

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

        .offer-banner__title {
          font-feature-settings: var(--font-settings);
          font-size: var(--fs-23);
          font-weight: var(--fw-400);
          line-height: var(--lh-normal);

          @media (width >= 768px) {
            font-size: var(--fs-29);
            font-weight: var(--fw-400);
            line-height: var(--lh-35);
          }
        }

        .offer-banner__subtitle {
          font-feature-settings: var(--font-settings);
          font-size: var(--fs-xxsmall);
          font-weight: var(--fw-300);
          line-height: var(--lh-13);

          @media (width >= 768px) {
            font-size: var(--fs-13);
            font-weight: var(--fw-400);
            line-height: var(--lh-15);
          }
        }
      }

      .offer-banner__cta {
        .offer-banner__button {
          width: fit-content;
          font-feature-settings: var(--font-settings);
          padding: var(--spacing-xxsmall) var(--spacing-10);
          text-align: center;
          color: var(--neutrals-sub-texts-paragraphs);
          font-size: var(--fs-xxsmall);
          font-weight: var(--fw-400);
          line-height: var(--lh-13);
          background-color: var(--tertiary-color);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: var(--spacing-xxsmall);

          @media (width >= 768px) {
            font-size: var(--fs-xsmall);
            line-height: var(--lh-13);
            padding: var(--spacing-6) var(--spacing-10);
          }

          .offer-banner__arrow-icon {
            width: 15px;
            height: 15px;
          }
        }
      }
    }
  }

  .splide__list {
    display: flex;
    flex-direction: row;
    list-style: none;

    .splide__slide {
      flex-grow: 0;
      flex-shrink: 0;
    }
  }

  .splide__pagination {
    margin-top: var(--spacing-44);
  }
}