/*** ---------- Algemeen ---------- ***/
.wpb-block {
    .wpb-block__header { margin-bottom: 3.2rem;
        .container { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 1.6rem; }
        .wpb-text { margin: 0; }
    }

    &.text-light .wpb-block__header .wpb-text { color: #fff; }
}

/*** ---------- Block: Hero ---------- ***/
.wpb-hero { --header-padding: 4.8rem; padding-top: var(--pt, var(--header-padding)); padding-bottom: var(--pb, var(--header-padding)); position: relative; z-index: 1; 

    .wpb-hero__body { position: relative; z-index: 2; }

    .wpb-hero__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
        figure { width: 100%; height: 100%; 
            img { width: 100%; height: 100%; object-fit: cover; }
        }
    }

    &.wpb-hero--home {}
}

/*** ---------- Block: Carousel ---------- ***/
.wpb-block--carousel {
    .wpb-image { position: relative; 
        img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        &::after { content: ''; display: block; width: 100%; padding-top: 75%; }
    }
}

/*** ---------- Block: Featured ---------- ***/
.wpb-block--featured {
    .wpb-block__body { --gc: 1; 
        .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 2rem; }
    }

    @media (min-width: 768px) {
        .wpb-block__body { --gc: 2; }
    }
    
    @media (min-width: 992px) {
        .wpb-block__body { --gc: 3; }
    }
}

/*** ---------- Block: Text Shortcode ---------- ***/
.wpb-block--text-gravityform {
    .container { column-gap: 2rem; row-gap: 2rem; }

    @media (min-width: 992px) {
        .container { column-gap: 3.2rem; }
    }
    
    @media (min-width: 1200px) {
        .container { column-gap: 6.4rem; }
    }
    
    @media (min-width: 1200px) {
        .container { column-gap: 9.8rem; }
    }
}

/*** ---------- Block: Text & video ---------- ***/
.wpb-block--text-video {
    .container { column-gap: 2rem; row-gap: 2rem; }
    .wpb-ratio { --br: 1rem;
        iframe, img, video { border-radius: var(--br); }
        .wpb-video__play { border: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; cursor: pointer; transition: opacity var(--ts-35) ease;
            img { object-fit: cover; width: 100%; height: 100%; }
            .wpb-video__play-icon { --size: 6rem; --icon-size: 2rem; --bg-clr: var(--clr-primary); --clr: rgb(255,255,255); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; z-index: 2; background-color: var(--bg-clr); border-radius: 50%; width: var(--size); min-width: var(--size); height: var(--size); transition: .25s ease; 
                i { color: var(--clr); font-size: var(--icon-size); }
            }
        }
        &:hover .wpb-video__play .wpb-video__play-icon { transform: translate(-50%, -50%) scale(1.1); }
    }

    @media (min-width: 992px) {
        .container { column-gap: 3.2rem; }
    }
    
    @media (min-width: 1200px) {
        .container { column-gap: 6.4rem; }
    }
    
    @media (min-width: 1400px) {
        .container { column-gap: 9.8rem; }
    }
}


/*** ---------- Block: Meili archive ---------- ***/
.wpb-block--meili-archive {
    .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }

    @media (min-width: 992px) {
        .container { grid-template-columns: 25rem 1fr; }
        .btn--filter-toggle { display: none; }
    }
}