.wp-block-voestalpine-cards {
    display: flex;
    gap: var(--wp--preset--spacing--15);
    flex-wrap: wrap;
    margin: var(--wp--preset--spacing--60) 0;
}

.wp-block-voestalpine-cards .card {
    width: calc(100% / 2 - (var(--wp--preset--spacing--15) / 2));
    height: 100%;
    aspect-ratio: 8 / 10;
    border-radius: var(--wp--preset--spacing--15);
    overflow: hidden;
    border: 0;
    position: relative;
}

.wp-block-voestalpine-cards a.card:hover {
    text-decoration: none;
    cursor: pointer;
}

.wp-block-voestalpine-cards .card .overlay-container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: var(--wp--preset--spacing--7-5);
    font-weight: 500;
    line-height: 1.25;
    color: var(--wp--preset--color--white);
    hyphens: auto;
}

.wp-block-voestalpine-cards .card .overlay-container > * {
    position: relative;
    z-index: 2;
}

.wp-block-voestalpine-cards .overlay-container:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 120%);
    opacity: 0.5;
    z-index: 1;
}

.wp-block-voestalpine-cards.slider {
    max-width: calc(var(--wp--style--global--content-size) + var(--wp--preset--spacing--15));
    display: block;
    width: 100%;
}

.wp-block-voestalpine-cards.slider .slick-list {
    margin: 0 calc(-1 * var(--wp--preset--spacing--7-5));
}

.wp-block-voestalpine-cards.slider .card {
    margin: 0 var(--wp--preset--spacing--7-5);
}

.wp-block-voestalpine-cards.slider button.slick-arrow {
    width: var(--wp--preset--spacing--60);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--7-5);
    height: calc(var(--wp--preset--spacing--60) + 2 * var(--wp--preset--spacing--30));
}

.wp-block-voestalpine-cards.slider button.slick-arrow:hover {
    cursor: pointer;
}

.wp-block-voestalpine-cards.slider button.slick-arrow.slick-prev {
    left: calc(var(--wp--preset--spacing--7-5));
}

.wp-block-voestalpine-cards.slider button.slick-arrow.slick-next {
    right: calc(var(--wp--preset--spacing--7-5));
}

@media (min-width: 450px) {

    .wp-block-voestalpine-cards .card .overlay-container {
        padding: var(--wp--preset--spacing--15);
        font-size: var(--wp--preset--font-size--large);
    }
}

@media (min-width: 768px) {
    .wp-block-voestalpine-cards .card {
        aspect-ratio: 7.5 / 10;
        width: calc(100% / 3 - (var(--wp--preset--spacing--15) * 2 / 3));
    }

    .wp-block-voestalpine-cards.slider button.slick-arrow.slick-prev {
        left: calc(var(--wp--preset--spacing--15));
    }
    
    .wp-block-voestalpine-cards.slider button.slick-arrow.slick-next {
        right: calc(var(--wp--preset--spacing--15));
    }
}

@media (min-width: 992px) {

    .wp-block-voestalpine-cards .card {
        aspect-ratio: 7 / 10;
        width: calc(100% / 4 - (var(--wp--preset--spacing--15) * 3 / 4));
    }
}

@media (min-width: 1200px) {
    
    .wp-block-voestalpine-cards {
        gap: var(--wp--preset--spacing--30);
    }

    .wp-block-voestalpine-cards .card {
        width: calc(100% / 4 - (var(--wp--preset--spacing--30) * 3 / 4));
    }

    .wp-block-voestalpine-cards.slider .slick-list {
        margin: 0 calc(-1 * var(--wp--preset--spacing--15));
    }

    .wp-block-voestalpine-cards.slider .card {
        margin: 0 var(--wp--preset--spacing--15);
    }
}