.roots-intro {
  .awards {
    > * {
      width: 33%;
      object-fit: contain;
      aspect-ratio: 4/3;
      flex: 1 0;
      @media (width >= 48rem) {
        width: 12rem;
        flex: initial;
      }
    }
  }
}

.carousel-roots {
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    width: 2rem;
    height: 100%;
    z-index: 2;
  }
  &:before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
  }
  &:after {
    right: 0;
    background: linear-gradient(to left, #fff, transparent); 
  }
  
  .swiper-slide {
    opacity: 1;
    transition: opacity .3s;
    &:not(.swiper-slide-active) {
      opacity: 0;
    }
    > .slide-image {
      padding: 1.5rem .25rem;
      aspect-ratio: 3/4;
      transition: all .3s;

      > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .3s;
      }
    }
    &.swiper-slide-active {
      > .slide-image {
        padding: 0;
      }
    }
    &.swiper-slide-prev {
      > .slide-image {
        padding: 1.5rem .5rem 1.5rem .25rem;
      }
    }
    &.swiper-slide-next {
      > .slide-image {
        padding: 1.5rem .25rem 1.5rem .5rem;
      }
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: var(--color-black);
    scale: .75;
    &.swiper-button-disabled {
      opacity: 0;
    }
  }
  .swiper-button-prev {
    left: .25rem;
  }
  .swiper-button-next {
    right: .25rem;
  }

  @media (width >= 36rem) {
    &:before,
    &:after {
      width: 10%;
    }
  }
  @media (width >= 32rem) {
    .swiper-slide {
      &:not(.swiper-slide-active) {
        opacity: 1;
      }
    }
  }
}