.gallery {
    padding: 103px 0 80px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 7.76%, #B4D2D2 100%);
    @media (min-width: $tabletSmallP1) {
        padding: 15rem 0 10rem;
    }

    // .gallery--white-bg

    &--white-bg {
        background: $white;
    }

    // .gallery__container

    &__container {
        position: relative;
    }

    // .gallery__head

    &__head {
        margin-bottom: 5rem;
        text-align: center;
        max-width: 76.8rem;
        width: 100%;
        margin: 0 auto 2rem;
        @media (min-width: $tabletSmallP1) {
            margin: 0 auto 5rem;
        }
        
        h2{
            @extend .h3;
            letter-spacing: -.2px;

            @media (min-width: $tabletSmallP1) {
                letter-spacing: -.7px;
            }
        }

        p {
            margin-top: 1.1rem;
            @media (min-width: $tabletSmallP1) {
                margin-top: 2rem;
            }
        }
    }

    // .gallery__slider

    .gallery__slider {
        @media (min-width: $tabletSmallP1) {
            column-count: 3;
            column-gap: 10px;
        }

        .slick-slide {
            margin: 0 .5rem;
        }

        .slick-list {
            margin: 0 -.5rem;
        }

    }

    // .gallery__slide-wrapper

    .gallery__slider-wrapper {
        position: relative;
        break-inside: avoid-column;
        box-sizing: border-box;

        @media (min-width: $tabletSmallP1) {
            margin-bottom: 10px;
            cursor: pointer;

        }

        &:nth-child(3) .gallery__slide,
        &:nth-child(5) .gallery__slide {
            @media (min-width: $tabletSmallP1) {
                aspect-ratio: 473/241;
            }

        }


        &:nth-child(1),
        &:nth-child(6) {
            @media (min-width: $tabletSmallP1) {
                padding-top: 7%;

            }
        }

        img,
        iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    //..gallery__slide
    .gallery__slide {
        position: relative;
        width: 100%;
        aspect-ratio: 335/350;
        border-radius: 2rem;
        overflow: hidden;

        @media (min-width: $tabletSmallP1) {
            aspect-ratio: 473/428;
        }

        &::before {
            content: '';
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70.09%, rgba(0, 0, 0, 0.8) 100%);
            position: absolute;
            top: 0;
            left: 0;
        }

        span {
            font-size: 1.2rem;
            color: #D6D1BD;
            font-weight: 500;
            line-height: 1.4;
            position: absolute;
            bottom: 1.5rem;
            left: 1.2rem;
            @media (min-width: $tabletSmallP1) {
                bottom: 1.8rem;
                left: 2rem;
            }
        }

        &[data-video] {

            @media (max-width: $tabletSmall) {

                img,
                .gallery__preview {
                    display: none;
                }
            }
        }
    }

    // .gallery__preview

    .gallery__preview {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba($black, .5);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        svg,
        img {
            width: 4.9rem;
            height: auto;
        }

        p {
            font-size: 1.4rem;
            margin-top: 1.4rem;
            color: $white;
        }
    }

    // .gallery__buttons

    &__buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        position: absolute;
        bottom: -1.1rem;
        right: 2rem;

        @media (min-width: $tabletSmallP1) {
            display: none;
        }
    }

    // .gallery__pagination

    &__pagination {
        @media (min-width: $tabletSmallP1) {
            display: none;
        }
    }

    .slick-dots {
        list-style: none;
        display: flex !important;
        align-items: center;
        gap: .8rem;
        padding: 2rem 0 0;
        margin: 0;

        @media(min-width: $tabletSmallP1) {
            padding: 2.6rem 0 2.6rem 11rem;
            justify-content: flex-start;
            display: none !important;
        }

        li {
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
            background-color: rgba($primary, .2);
            margin: 0;
            padding: 0;
            position: relative;
            cursor: pointer;
            transition: all .2s;

            &::before {
                content: '';
                width: 1.25rem;
                aspect-ratio: 1/1;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            &.slick-active {
                background-color: $primary;
                pointer-events: none;
            }
        }

        button {
            font-size: 0;
            color: transparent;
        }
    }

    .slick-arrow {
        width: 2.4rem;
        aspect-ratio: 1/1;
        border-radius: 50%;
        overflow: hidden;
        font-size: 0;
        color: transparent;
        transition: .2s all;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &.slick-disabled {
            pointer-events: none;
        }

        img,
        svg {
            width: 100%;
            height: auto;
        }
    }
}