/*
	Table of content
    1. GRID
        1a. ICOONBLOKKEN
    RESIZE
*/

/* 1. GRID */
/* 1a. ICOONBLOKKEN */
/* tegels links in row-lg, rechts ernaast het beeldicoon (achter de tegels); het icoon mag van het scherm aflopen */
.grid-icon-blocks {
    overflow-x: clip;
}

.grid-icon-blocks .container {
    position: relative;
}

.grid-icon-blocks .blocks-icon {
    position: absolute;
    left: 86.2rem;
    top: 8.1rem;
    width: 48.7rem;
    height: auto;
    opacity: .02;
    pointer-events: none;
}

.grid-icon-blocks .icon-blocks-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 29.5rem);
    gap: 2rem;
}

.grid-icon-blocks .icon-block {
    display: block;
    min-height: 27.2rem;
    padding: 3.5rem 2rem 3.5rem 3.5rem;
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    color: var(--color-black);
    text-decoration: none;
    transition: transform .4s ease;
}

/* fade-in combineren met de eigen transitie (anders overschrijft die de fade van .fade-up) */
.grid-icon-blocks .icon-block.fade-up {
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .6, .2, 1);
}

.grid-icon-blocks .icon-block.is-link:hover {
    transform: translateY(-.5rem);
}

.grid-icon-blocks .icon-block-icon {
    display: block;
    width: auto;
    height: 5rem;
    margin-bottom: 2.4rem;
}

/* RESIZE */
@media (max-width: 1220px) {
    .grid-icon-blocks .blocks-icon {
        display: none;
    }

    .grid-icon-blocks .icon-blocks-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .grid-icon-blocks .icon-blocks-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-icon-blocks .icon-block {
        min-height: 0;
    }
}

@media (max-width: 767px) {
    /* mobiel gecentreerd, zoals in het design */
    .grid-icon-blocks .icon-blocks-wrapper {
        gap: 1rem;
    }

    .grid-icon-blocks .icon-block {
        padding: 2rem 2.5rem 2.5rem;
        border-radius: var(--border-radius-md);
        text-align: center;
    }

    .grid-icon-blocks .icon-block-icon {
        height: 4rem;
        margin: 0 auto 1rem;
    }

    .grid-icon-blocks .icon-block h3 {
        margin-bottom: .6rem;
    }
}

@media (max-width: 599px) {
    .grid-icon-blocks .icon-blocks-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 499px) {
}