@import url('../../commons/scripts/splide/splide-core.min.css');

.rewards-banner {
  width: 100%;

  &.g-container {
    max-width: var(--container-max-width);
    margin-inline: auto;
  }

  .rewards-banner__header {
    margin-bottom: 24px;

    @media (width>=1024px) {
      margin-bottom: 40px;
    }

    .rewards-banner__title * {
      font-size: var(--heading-font-15-mob-sub-heading);
      line-height: var(--heading-lh-17-mob-text-normal);
      font-weight: var(--fw-700);
      margin-bottom: 6px;

      @media (width>=1024px) {
        font-size: var(--heading-font-1-des);
        line-height: var(--heading-lh-22-des-text-normal);
        font-weight: var(--fw-600);
        margin-bottom: 13px;
      }
    }

    .rewards-banner__subtitle * {
      font-size: var(--heading-font-11-mob-text-small);
      line-height: var(--heading-lh-19-mob-display);
      font-weight: var(--fw-300);

      @media (width>=1024px) {
        font-size: var(--heading-font-20-mob-text);
      }
    }
  }

  .rewards-banner__slider {
    position: relative;
  }

  .rewards-banner__track {
    overflow: hidden;
    border-radius: 0;
  }

  .rewards-banner__list {
    margin: 0;
    padding: 0;
  }

  .rewards-banner__slide {
    position: relative;
    list-style: none;
  }

  .rewards-banner__media {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      min-height: 275px;
      display: block;
      object-fit: cover;
    }
  }

  .rewards-banner__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--gradient-7);
    padding: 1.5rem;

    @media (width >=768px) {
      padding: 2.5rem;
    }
  }

  .rewards-banner__slide-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .rewards-banner__slide-content-title * {
    font-size: var(--heading-font-8-mob);
    line-height: var(--heading-lh-17-mob-text-normal);
    font-weight: var(--fw-700);
    color: var(--secondary-white);
    margin-top: 0;
    margin-bottom: 20px;

    @media (width >=1024px) {
      font-size: var(--heading-font-1-des);
      margin-bottom: 24px;
    }
  }

  .rewards-banner__slide-separator {
    display: none;

    @media (width >=1024px) {
      display: block;
      width: 420px;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 50%, rgba(255, 255, 255, 0.00) 100%);
    }
  }

  .rewards-banner__slide-content-description {
    margin-bottom: 24px;

    p {
      font-family: var(--font-primary-nexa);
      font-size: 0.875rem;
      line-height: 1.25rem;
      color: var(--tertiary-white);
      margin: 0;
    }

    @media (width >=1024px) {
      margin-bottom: 56px;
      margin-top: 16px;
    }
  }

  .rewards-banner__slide-content-cta {
    display: flex;
    flex-direction: column;
    gap: 16px;

    @media (width >=1024px) {
      flex-direction: row;
      justify-content: flex-start;
    }
  }

  .rewards-banner__cta--primary {
    text-decoration: underline;

    &:hover {
      border: 1px solid var(--secondary-white);
    }
  }

  .rewards-banner__cta--secondary {
    color: var(--secondary-white);
    text-decoration: underline;
    gap: 0;
    padding: 0;
    display: flex;

    &.rewards-banner__cta--download {
      &::after {
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url('/icons/download-new.svg') no-repeat;
        background-size: contain;
        background-position: center;
      }
    }
  }

  .rewards-banner__nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;

    @media (width >=1024px) {
      margin-top: 24px;
      gap: 16px;
    }

    &.hidden {
      display: none;
    }
  }

  .rewards-banner__arrow {
    width: 2rem;
    height: 2rem;
    border: 0.667px solid var(--primary-blue);
    cursor: pointer;
    background: url('/icons/slider-arrow-blue.svg') center / 1rem 1rem no-repeat;

    @media (width >=1024px) {
      width: 3rem;
      height: 3rem;
    }
  }

  .rewards-banner__arrow--prev {
    transform: rotate(180deg);
  }
}