/*------------------------------------*\
    Image Cards Block
\*------------------------------------*/

.image-cards__content {
    margin-bottom: var(--heading-spacing);
}

.image-cards__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.image-cards__card:hover .btn-link::before {
    width: 100%;
    transition: all 0.3s ease-in-out;
}

.image-cards__card:hover .image-cards__image {
    cursor: pointer;
}

.image-cards__image {
    background: var(--white);
    height: 225px;
    overflow: hidden;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    aspect-ratio: 13 / 9;

    .object-fit-cover {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

.image-cards__image:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background: var(--primary-color);
}

.image-cards__body {
    padding: 22px 21px;
    flex: 1;
    background: var(--medium-gray);
    display: flex;
    flex-direction: column;
}

.bg-medium .image-cards__body,
.bg-dark .image-cards__body,
.bg-darkest .image-cards__body {
    background: var(--white);
}

.image-cards__heading {
    font-size: 20px;
    margin: 0 0 10px;
    color: var(--secondary-color);
}

.image-cards__description {
    color: var(--text-color);
    margin-bottom: 15px;
}

.image-cards__description ul {
    margin-left: 0;
}

.image-cards__description ul:last-child {
    margin: 0;
}

.image-cards__description p:last-child {
    margin-bottom: 0;
    color: var(--text-color);
}

.bg-darkest .image-cards__description a:not(.btn),
.bg-dark .image-cards__description a:not(.btn),
.bg-medium .image-cards__description a:not(.btn) {
    color: var(--black);
}

.bg-darkest .image-cards__description :is(p, li),
.bg-dark .image-cards__description :is(p, li),
.bg-medium .image-cards__description :is(p, li) {
    color: var(--black);
}   

.bg-darkest .image-cards__description li::before,
.bg-dark .image-cards__description li::before,
.bg-medium .image-cards__description li::before {
    background: var(--black);
}   

.image-cards__link {
    margin-top: auto;

    .btn-link {
            color: var(--text-color);

            &:hover {
                color: var(--black);
            }
    }

}

/*------------------------------------*\
    Mobile Slider
\*------------------------------------*/

.image-cards__grid.slick-initialized {
    margin: 0 -22px 0 0;
    padding: 0 0 71px;
}

.image-cards__grid.slick-initialized .slick-track {
    display: flex;
}

.image-cards__grid.slick-initialized .slick-slide {
    width: 310px;
    margin: 0 5px;
    vertical-align: top;
    height: inherit !important;
}

.image-cards__grid.slick-initialized .slick-slide > * {
    height: 100%;
}

.image-cards__grid.slick-initialized .slick-slide > div {
    height: 100% !important;
    display: flex;
}

.image-cards__grid.slick-initialized.fx-slider .fx-slide {
    height: 100%;
}

.image-cards__grid.slick-initialized .slick-slide .image-cards__item > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.image-cards__grid .slick-arrow {
    left: 0;
    right: unset;
    margin: 0;
    transform: translate(0, 0);
    width: 38px;
    height: 38px;
}

.image-cards__grid .slick-next {
    left: 55px;
}

.image-cards__grid .slick-arrow.slick-disabled {
    opacity: 0.5;
    pointer-events: none;
}


/*------------------------------------*\
    Tablet+ Grid Layout (unslicked)
\*------------------------------------*/

@media (min-width: 768px) {

    .image-cards__content {
        margin-bottom: 32px;
    }

    .js-image-cards-slider.slider-has-preloader:not(.slick-initialized) {
        min-height: 0;
    }

    .js-image-cards-slider.slider-has-preloader:not(.slick-initialized):before {
        display: none;
    }

    .js-image-cards-slider.slider-has-preloader:not(.slick-initialized) > .fx-slide {
        opacity: 1;
    }

    .js-image-cards-slider.fx-slider .fx-slide {
        display: block;
    }

    .image-cards__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px;
    }

    .image-cards__item {
        width: calc((100% - 64px) / 3);
    }
}