.image-banner-slider {
  --x-padding: 3rem;

  &.page-width {
    padding: 0 var(--x-padding) !important;
  }

  @media screen and (max-width: 989px) {
    --x-padding: 3rem;

    &:not(:is(.image-banner-slider--stack-mobile)).page-width {
      padding: 0 !important;
    }

    &:is(.image-banner-slider--stack-mobile).page-width {
      padding: 0 var(--x-padding) !important;
    }
  }

  @media screen and (max-width: 749px) {
    --x-padding: 1.5rem;
  }

  position: relative;
  width: 100%;

  & .image-banner-slider__content {
    position: relative;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;

    @media screen and (max-width: 989px) {
      display: flex;
      overflow-y: hidden;
      overflow-x: scroll;
      contain: inline-size;

      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;

      scrollbar-width: none;

      padding-inline: var(--x-padding);
      gap: 1rem;

      &::-webkit-scrollbar {
        display: none;
      }

      &:has(> .image-banner-slider__slide:first-child:last-child) {
        padding-inline: var(--x-padding);
      }
    }

    & .image-banner-slider__slide--2,
    & .image-banner-slider__slide--3,
    &:has(.image-banner-slider__slide--3) .image-banner-slider__slide--1 {
      --image-banner-slider-slide-text-align: center;
      --image-banner-slider-slide-align-items: center;
    }

    &:has(.image-banner-slider__slide--2) {
      grid-template-columns: 2fr 1fr;
    }

    &:has(.image-banner-slider__slide--3) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  & .image-banner-slider__slide {
    --image-banner-slider-slide-text-align: left;
    --image-banner-slider-slide-align-items: flex-start;

    position: relative;
    width: 100%;
    padding: 150px 50px 50px;
    overflow: hidden;
    text-align: var(--image-banner-slider-slide-text-align);
    scroll-snap-align: start;

    @media screen and (max-width: 989px) {
      flex: 0 0 80vw;
      scroll-snap-align: center;
      padding: 100px 24px 32px;

      &.image-banner-slider__slide--1 {
        scroll-snap-align: start;
      }

      &.image-banner-slider__slide--2 {
        scroll-snap-align: end;
      }

      &:first-child {
        scroll-margin-left: var(--x-padding);
      }

      &:last-child {
        scroll-margin-right: var(--x-padding);
      }

      &:first-child:last-child {
        flex: 1;
      }
    }

    & .image-banner-slider__slide__stretched-link {
      display: inline;

      &,
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }

      &::after {
        content: '';
      }
    }

    & .image-banner-slider__slide__background {
      &,
      & > img,
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        pointer-events: none;
        user-select: none;
      }

      & > img {
        object-fit: cover;
        transition: scale var(--duration-short) linear;
      }

      &::after {
        content: '';
        background: linear-gradient(to bottom, transparent, rgba(var(--color-foreground), 0.8));
      }
    }

    &:hover .image-banner-slider__slide__background > img {
      scale: 1.02;
    }

    &:first-child:last-child {
      padding: 0;

      .image-banner-slider__slide__background {
        &,
        & > img {
          position: relative;
        }

        &::after {
          display: none;
        }
      }
    }

    & .image-banner-slider__slide__content {
      position: relative;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: var(--image-banner-slider-slide-align-items);
    }
    
    & .image-banner-slider__slide__text,
    & .image-banner-slider__slide__title {
      margin: 0;
      line-height: 1;
      color: rgb(var(--color-background));
      text-transform: uppercase;
    }

    & .image-banner-slider__slide__text {
      margin-bottom: 0.75rem;
      font-size: 17px;
      font-weight: 300;

      @media screen and (max-width: 989px) {
        font-size: 15px;
      }

      @media screen and (max-width: 749px) {
        font-size: 14px;
      }
    }

    & .image-banner-slider__slide__title {
      font-family: "veneer-two", sans-serif;
      font-size: 72px;
      font-weight: 400;

      @media screen and (max-width: 1399px) {
        font-size: 58px;
      }

      @media screen and (min-width: 990px) and (max-width: 1219px) {
        font-size: 40px;
      }

      @media screen and (max-width: 989px) {
        font-size: 48px;
      }

      @media screen and (max-width: 749px) {
        font-size: 40px;

        br {
          display: none;
        }
      }
    }

    & .image-banner-slider__slide__buttons-container {
      margin-top: 40px;
      display: flex;
      gap: 16px;

      @media screen and (max-width: 989px) {
        margin-top: 24px;
        gap: 8px;
        flex-wrap: wrap;
        align-items: flex-start;
      }
    }

    & .image-banner-slider__slide__button {
      font-size: 13px;
      text-transform: uppercase;
      padding: 14px 16px;
      transition: background-color var(--duration-short) ease-in-out;

      @media screen and (max-width: 989px) {
        font-size: 12px;
        padding: 10px 14px;
        min-width: 0;
        min-height: calc(4rem + var(--buttons-border-width) * 2);
      }

      &::after {
        content: '';
        position: static;
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 10px;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        border-radius: 0;
        box-shadow: none;
        transform: rotate(45deg);
      }
    }

    & .image-banner-slider__slide__button:hover,
    &:has(.image-banner-slider__slide__stretched-link):hover .image-banner-slider__slide__button {
      background-color: rgb(var(--color-foreground));
    }
  }

}

.image-banner-slider--wide {
  & .image-banner-slider__content {
    &:has(.image-banner-slider__slide--2) {
      grid-template-columns: repeat(2, 1fr);
    }

    &:has(.image-banner-slider__slide--3) {
      grid-template-columns: repeat(3, 1fr);
    }

    & .image-banner-slider__slide {
      --image-banner-slider-slide-text-align: left;
      --image-banner-slider-slide-align-items: flex-start;

      padding: 125px 50px 50px;

      @media screen and (max-width: 989px) {
        padding: 80px 24px 32px;
      }

      & .image-banner-slider__slide__content {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: 1fr auto auto;
        column-gap: 16px;

        @media screen and (max-width: 989px) {
          display: flex;
        }
      }

      & .image-banner-slider__slide__text {
        grid-row: 2;
        grid-column: 1;
        margin-bottom: 1rem;
        font-size: 15px;

        @media screen and (max-width: 749px) {
          font-size: 14px;
        }
      }

      & .image-banner-slider__slide__title {
        grid-row: 3;
        grid-column: 1;
        font-size: 52px;

        @media screen and (max-width: 989px) {
          font-size: 40px;
        }

        @media screen and (max-width: 749px) {
          font-size: 34px;
        }
      }

      & .image-banner-slider__slide__buttons-container {
        grid-row: 3;
        grid-column: 2;
        margin-top: 0;
        flex-shrink: 0;
        align-self: flex-end;

        @media screen and (max-width: 989px) {
          margin-top: 24px;
          align-self: flex-start;
        }
      }
    }
  }
}

.image-banner-slider--even {
  & .image-banner-slider__content {
    &:has(.image-banner-slider__slide--2) {
      grid-template-columns: repeat(2, 1fr);
    }

    &:has(.image-banner-slider__slide--3) {
      grid-template-columns: repeat(3, 1fr);
    }

    & .image-banner-slider__slide {
      --image-banner-slider-slide-text-align: center;
      --image-banner-slider-slide-align-items: center;

      & .image-banner-slider__slide__text {
        font-size: 15px;

        @media screen and (max-width: 749px) {
          font-size: 14px;
        }
      }

      & .image-banner-slider__slide__buttons-container {
        margin-top: 20px;
      }
    }
  }
}

.image-banner-slider--stack-mobile {
  @media screen and (max-width: 989px) {
    & .image-banner-slider__content {
      display: flex;
      flex-direction: column;
      overflow: visible;
      scroll-snap-type: none;
      padding-inline: 0;
      gap: 1rem;
    }

    & .image-banner-slider__slide {
      flex: 0 0 auto;
      width: 100%;
      scroll-snap-align: none;
    }
  }
}

.image-banner-slider__slide__button__label--mobile {
  display: none;
}

@media screen and (max-width: 989px) {
  .image-banner-slider__slide__button__label:not(.image-banner-slider__slide__button__label--mobile) {
    display: none;
  }

  .image-banner-slider__slide__button__label--mobile {
    display: inline;
  }
}