@layer reset, base, swiper;

@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css') layer(base);

@layer swiper {
  .swiper {
    width  : 100%;
    height : 100%;
  }

  .swiper-wrapper {
    display     : flex;
    align-items : center;
  }

  .swiper-slide {
    scale      : 1.25;
    transition : scale 250ms ease-in-out;

    &.swiper-slide-active {
      scale   : 2;
      z-index : 10;
    }

    &.swiper-slide-prev,
    &.swiper-slide-next {
      scale               : 1.7;
      z-index             : 5;
      transition-duration : 150ms;
    }
    
    &.swiper-slide-next + & {
      z-index : 2;
    }
  }

  .swiper-slide img {
    display        : block;
    border-radius  : 0.5rem;
    width          : 100%;
    height         : 100%;
    object-fit     : cover;
    user-select    : none;
  }

  .swiper-button {
    --position       : 17%;
    background-color : #db802d;
    height           : 3rem;
    width            : 3rem;
    border-radius    : 2.5rem;
    
    &.swiper-button-prev {
      left : var(--position);
    }

    &.swiper-button-next {
      right : var(--position);
    }

    &:hover {
      background-color : #db802f;
    }

    &::after {
      font-size : 1.5rem;
      color     : white;
    }
  }
}