/*  COMPONENT: SLIDER
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--slider {
        --size-button: 2.5rem;
        --border-width: 2px;
        --border-radius: 2rem;
        --icon-url-arrow-left: url("../../images/icons/icon--arrow-left.svg");
        --icon-url-arrow-right: url("../../images/icons/icon--arrow-right.svg");
        --button-background-color: rgba(255, 255, 255, 0.5);
        --button-background-filter: blur(5px);
    }
    .slider {
        display: none;
    }
    .slick-slider {
        display: grid;
        grid-template-columns: 1fr min-content 0.5rem min-content 1.25rem;
        grid-template-rows: min-content min-content 1.25rem;
    }

    .slick-slider.slick-initialized {
        display: grid;
    }

    .slick-slider .slick-list {
        grid-row: 1 /4;
        grid-column: 1 /-1;
    }
    .slick-slider .slick-list figure {
        margin: 0 !important;
    }
    .slick-slider .slick-list figure img {
        width: 100%;
    }
    .slick-slider .slick-list figure img:hover {
        filter: grayscale(0) !important;
    }

    .slick-slider .slick-arrow {
        grid-row: 2;
        place-self: end;

        position: relative;
        z-index: 1;

        width: var(--size-button);
        height: var(--size-button);

        padding: 0;

        font-size: 0;
        line-height: 0;

        background-color: var(--button-background-color);
        backdrop-filter: var(--button-background-filter);
        background-repeat: no-repeat;
        background-size: 100%;

        border-radius: var(--border-radius);
        border: var(--border-width) solid var(--color-black);
    }
    @media (min-width: 640px) {
        .slick-slider .slick-arrow {
            position: absolute;
            bottom: -4rem;
        }
        .slick-slider .slick-prev {
            right: 3rem;
        }
    }
    .slick-slider .slick-arrow:hover {
        background-color: var(--color-white);
    }

    .slick-slider .slick-prev {
        grid-column: 2;
        background-image: var(--icon-url-arrow-left);
    }
    .slick-slider .slick-next {
        grid-column: 4;
        background-image: var(--icon-url-arrow-right);
    }
}