Three Blocks

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

.block-three-blocks {
    text-align: center;

    .row {
        justify-content: center;
    }

    &.bg--black {
        background-color: transparent;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: $secondary;
            border-radius: 20px;
            z-index: -2;
        }

        img {
            @include margin-bottom(rem-calc(3.25rem));
            width: 100%;
            border-radius: 20px;
            min-height: 345px;
            max-height: 345px;
            object-fit: cover;

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

        h4 {
            color: $white;
            max-width: 75%;
            margin-left: auto;
            margin-right: auto;
        }

        p {
            color: $white;
            margin-bottom: 0;
        }
    }

    h2 {
        color: $secondary;
        @include margin-bottom(rem-calc(1rem));

        span {
            color: $primary;
        }
    }

    .heading {
        color: $secondary;
        @include margin-bottom(rem-calc(1rem));
        @include fluid-type(28, 50, 375, $max-container-size);
        font-weight: 700;

        span {
            color: $primary;
        }
    }

    p {
        max-width: 58%;
        margin-left: auto;
        margin-right: auto;
        @include margin-bottom(rem-calc(3.938rem));
        color: $secondary;
        font-weight: 700;

        @include bp($lg, true) {
            max-width: 100%;
        }
    }

    &__wrapper {
        img {
            @include margin-bottom(rem-calc(3.25rem));
            width: 100%;
            border-radius: 20px;
            min-height: 345px;
            max-height: 345px;
            object-fit: cover;

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

        h4 {
            @include fluid-type(24, 36, 375, $max-container-size);
            @include margin-bottom(rem-calc(0.938rem));
            color: $secondary;
        }

        p {
            color: $secondary;
            max-width: 100%;
            font-weight: 700;
        }
    }

    &__slider {
        .slick-track {
            display: flex;
            cursor: grab;
        }

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

        .slick-slide > div {
            height: 100%;
        }

        .slick-list {
            overflow: hidden;
        }
    }

    &__tabs {
        ul {
            @include margin-bottom(rem-calc(3.75rem));
            @include padding(rem-calc(0.625rem));
            border: 0.063rem solid $off-white;
            max-width: 67.25rem;
            margin-left: auto;
            margin-right: auto;

            @include bp($lg, true) {
                max-width: 100%;
            }

            li {
                display: inline-block;
                @include padding(rem-calc(1.063rem 0));
                min-width: 32.75rem;
                text-align: center;

                @include bp($xl, true) {
                    min-width: 26.75rem;
                }

                @include bp($lg, true) {
                    min-width: 100%;
                }

                &.active {
                    background-color: $off-white;
                }

                a {
                    font-size: 1.875rem;
                    display: block;
                    color: $white;

                    @include bp($lg, true) {
                        font-size: 1.25rem;
                    }
                }
            }
        }
    }

    &__tab-wrapper {
        display: none;
        &.active {
            display: block;
        }
    }
}

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

$(".block-three-blocks__slider").slick({
  slidesToShow: 3,
  prevArrow: false,
  nextArrow: false,
  autoplay: true,
  cssEase: "linear",
  infinite: true,
  responsive: [
    {
      breakpoint: 992,
      settings: {
        arrows: false,
        slidesToShow: 2,
        autoplay: false,
      },
    },
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        slidesToShow: 2,
        autoplay: false,
      },
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        slidesToShow: 1,
        autoplay: false,
      },
    },
  ],
});