Impact Carousel

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-impact-carousel {
    overflow: visible;

    @include bp($lg, true) {
        overflow: hidden;
    }

    &__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include margin-bottom(rem-calc(3rem));

        h3 {
            margin-bottom: 0;
        }

        .heading {
            margin-bottom: 0;
            @include fluid-type(28, 50, 375, $max-container-size);
            font-weight: 700;
            line-height: 100%;
            color: $secondary;
        }

        @include bp($lg, true) {
            display: block;

            .heading {
                @include margin-bottom(rem-calc(1rem));
            }
        }
    }

    &__slider {
        cursor: pointer;

        .slick-list {
            overflow: visible;
        }

        .slick-track {
            display: flex;

            .slick-slide {
                @include margin-right(rem-calc(1.375rem));
            }
        }
    }

    &__slider-wrapper {
        min-width: 26.063rem;
        position: relative;

        @media screen and (min-width: 2200px) {
            min-width: 100%;
        }

        a {
            cursor: pointer;

            &:hover {
                .btn {
                    border: 0.063rem solid $primary;
                    color: $primary !important;
                }
            }
        }

        @media screen and (max-width: 1500px) {
            min-width: auto;
        }

        &-large {
            picture {
                img {
                    min-height: 350px;
                    object-fit: cover;

                    @include bp($xl, true) {
                        min-height: 270px;
                    }
                }
            }
        }

        &-small {
            picture {
                img {
                    min-height: 236px;
                    // min-height: 350px;
                    object-fit: cover;

                    // @include bp($xl, true) {
                    //     min-height: 270px;
                    // }
                }
            }
        }

        picture {
            img {
                width: 100%;
                border-radius: 20px;
            }
        }

        img {
            @include margin-bottom(rem-calc(2rem));
            border-radius: 20px;
        }

        h5 {
            @include margin-bottom(rem-calc(0.813rem));
        }

        p {
            @include margin-bottom(rem-calc(1.5rem));
            font-weight: 400;
        }

        .btn {
            @include fluid-type(14, 18, 375, $max-container-size);
            line-height: 1.563rem;
        }
    }

    &__slider-wrapper-small {
        h5 {
            @include margin-bottom(rem-calc(0.75rem));
        }
    }

    &__slider-wrapper-float {
        background-color: $white;
        position: absolute;
        top: 1.375rem;
        left: 1.25rem;
        @include padding(rem-calc(0.313rem 1.063rem));
        border-radius: 0.625rem;

        p {
            margin: 0;
            font-weight: 700;
        }
    }
}

import "../../node_modules/slick-carousel/slick/slick";

$(document).ready(function () {
  if ($(".block-impact-carousel__slider").length > 0) {
    $(".block-impact-carousel__slider").slick({
      centerMode: false,
      slidesToShow: 4,
      infinite: false,
      prevArrow: false,
      centerPadding: "0px",
      nextArrow: false,
      autoplay: false,
      responsive: [
        {
          breakpoint: 2200,
          settings: {
            arrows: false,
            centerMode: false,
            centerPadding: "0px",
            slidesToShow: 3,
          },
        },
        {
          breakpoint: 992,
          settings: {
            arrows: false,
            centerMode: false,
            centerPadding: "0px",
            slidesToShow: 2,
          },
        },
        {
          breakpoint: 768,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: "0px",
            slidesToShow: 1,
          },
        },
        {
          breakpoint: 480,
          settings: {
            arrows: false,
            centerMode: true,
            slidesToShow: 1,
          },
        },
      ],
    });
  }
});