Carousel component - Medium and small screen styles

carousel-medium-small-screens.scss

@media screen and (max-width: 1023px) {
  .carousel {
    padding-left: 0;
    padding-right: 0;
  }

  .carousel__activator:nth-of-type(n):checked {
    ~ .carousel__controls:nth-of-type(n) {
      display: none;
    }

    ~ .carousel__screen .carousel__track {
      transform: none;
    }
  }

  .carousel__screen {
    margin-left: 0;
    margin-right: 0;
  }

  .carousel__track {
    overflow-x: auto;
    width: auto;
    padding-left: 48px;
    padding-right: 48px;
  }

  // medium screens can have up to 3 items per slide
  @for $i from 1 through 3 {
    .carousel__item--tablet-in-#{$i} {
      // 90% instead of 100% so the next slide appears on the right side
      width: #{90% / $i};
    }
  }
}

@media screen and (max-width: 650px) {
  .carousel__track {
    padding-left: 0;
    padding-right: 0;
  }

  // small screens can have up to 3 items per slide
  @for $i from 1 through 3 {
    .carousel__item--mobile-in-#{$i} {
      // 90% instead of 100% so the next slide appears on the right side
      width: #{90% / $i};
    }
  }
}