/* 
Flex Post Side Swiper

Algemene CSS instellingen voor de module.
Verwijder deze instellingen niet.
*/

.flex_module.postsideslider {
    display: flex;
    width: 100%;
}

.flex_module.postsideslider > div:first-child {
    max-width: 30%;
}

.flex_module.postsideslider > div:last-child {
    max-width: 70%;
}

.side-slider-row > .fl-row-content-wrap {
    overflow: hidden;
}

.side-slider-row .side-text-col {
    position: relative; z-index: 4;
}

.item-slider-buttons {
    margin-top: auto; 
}

.item-slider-buttons .fl-html {
    display: flex; align-items: center; gap: 1rem;
}

.item-slider .slide-wrapper {
    display: flex; flex-direction: column; justify-content: flex-end; 
    color: #ffffff; position: relative;
    border-radius: 4px; position: relative; overflow: hidden;
}

.item-slider .slide-wrapper .slide-background img {
    aspect-ratio: 2/3; object-fit: cover; width: 100%;
    transition: all 0.25s ease-out;
    border-radius: 9px;
    max-height: 550px;
}

.item-slider .slide-wrapper .slide-background::before {
    content: ''; position: absolute; bottom: 0; left: 0; z-index: 1;
    width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%);
    transition: height 0.3s ease-out;
    
    border-radius: 9px;
    box-shadow: 0px 3.446px 43.07px 0px rgba(0, 0, 0, 0.15);
}

.item-slider .slide-wrapper:hover .slide-background {
    height: 75%;
}

.item-slider .slide-wrapper:hover .slide-background img {
    scale: 1.05;
}

.item-slider .slide-wrapper .slide-content {
    position: absolute; bottom: 0; left: 0; z-index: 5; 
    display: block; color: #ffffff; width: 100%;
    text-decoration: none; padding: 2rem 1.5rem; 
}

.item-slider .slide-wrapper .slide-text {
    display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0;
    transition: all 0.3s ease-in-out; font-size: 1rem;
}

.item-slider .slide-wrapper .slide-text > * { 
    overflow: hidden;
}

.item-slider .slide-wrapper .slide-text > *:last-child {
    margin-bottom: 0;
}

.item-slider .slide-content .slide-title {
    color: #ffffff; display: flex; align-items: center; gap: 0.5rem;
}

.item-slider .slide-content .slide-title .material-symbols {
    display: block; transition: all 0.25s ease-out;
}

.item-slider .slide-wrapper:hover .slide-title .material-symbols {
    translate: 4px 0;
}

.item-slider .slide-wrapper:hover .slide-text {
    grid-template-rows: 1fr; opacity: 1;
}