
section#home-page-template,
section#home-page-template .grid{
    overflow: hidden;
}
section#home-page-template img{
    width: 100%;
    max-height: 100vh;
    max-height: 100svh;
    display: flex;
}
section#home-page-template .container-fluid{
    width: 100%;
    max-width: 4096px;
    margin: 0px;
    padding: 0px;
}
section#home-page-template .grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
}
section#home-page-template .grid[data-columns="4"]{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media(min-width: 1025px){
    section#home-page-template .grid[data-columns="1"]{
        max-height: 100vh;
        max-height: 100svh;
    }
    section#home-page-template .grid[data-columns="2"]{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    section#home-page-template .grid[data-columns="3"]{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    section#home-page-template .grid[data-columns="4"]{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* section#home-page-template .grid[data-columns] .item[data-type="image"] img{
        width: 100%;
        height: auto;
    } */
    section#home-page-template .grid[data-columns="2"] .item[data-type="video"] .item__thumbnail,
    section#home-page-template .grid[data-columns="2"] .item[data-type="image"] img{
        aspect-ratio: 3/2;
    }
    section#home-page-template .grid[data-columns="4"] .item[data-type="video"] .item__thumbnail,
    section#home-page-template .grid[data-columns="4"] .item[data-type="image"] img{
        aspect-ratio: 2/3;
    }
}

section#home-page-template .item{
    position: relative;
}
section#home-page-template .item .item__title{
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 22px;
    padding-left: 30px;
    padding-bottom: 30px;
    color: #FFFFFF;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0px 0px 6px;
}
section#home-page-template .item__thumbnail{
    overflow: hidden;
    max-height: 100vh;
    max-height: 100svh;
    pointer-events: none;
    z-index: 0;
    position: relative;
}

section#home-page-template .item[data-type="image"] .item__thumbnail,
section#home-page-template .item[data-type="image"] picture,
section#home-page-template .item[data-type="image"] img,
section#home-page-template .item[data-type="desktop_image_mobile_video"] .item__thumbnail,
section#home-page-template .item[data-type="desktop_image_mobile_video"] picture,
section#home-page-template .item[data-type="desktop_image_mobile_video"] img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section#home-page-template .item[data-type="video"]:after{
    content: '';
    position: absolute;
    inset: 0;
}
section#home-page-template .item[data-type="video"] .video-wrapper,
section#home-page-template .item[data-type="desktop_image_mobile_video"] .video-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 9/16;
}
section#home-page-template .item[data-type="video"] .video-wrapper iframe,
section#home-page-template .item[data-type="desktop_image_mobile_video"] .video-wrapper iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
@media(min-width: 1025px){
    section#home-page-template .grid[data-columns="1"] .item[data-type="video"] .video-wrapper,
    section#home-page-template .grid[data-columns="1"] .item[data-type="desktop_video_mobile_image"] .video-wrapper{
        aspect-ratio: 16/9;
    }
    section#home-page-template .grid[data-columns="2"] .item[data-type="video"] .video-wrapper,
    section#home-page-template .grid[data-columns="2"] .item[data-type="desktop_video_mobile_image"] .video-wrapper{
        aspect-ratio: 3/2;
    }
    section#home-page-template .item[data-type="video"] .video-wrapper iframe,
    section#home-page-template .item[data-type="desktop_video_mobile_image"] .video-wrapper iframe{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 177.78%; /* 100 * 16 / 9 */
        height: 100%;
        transform: translate(-50%, -50%);
    }
    section#home-page-template .grid[data-columns="4"] .item[data-type="video"] .video-wrapper iframe{
        width: 100%;
        height: 177.78%; /* 100 * 16 / 9 */
    }
}

section#home-page-template .visible-lg{
    display: none;
}
section#home-page-template .hidden-lg{
    display: flex;
}
@media(min-width:1025px){
    section#home-page-template .visible-lg{
        display: flex;
    }
    section#home-page-template .hidden-lg{
        display: none;
    }
}

/* .row--item{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.row--item .item .image-desktop{
    display: block;
}
.row--item .item .image-mobile{
    display: none;
}
@media (max-width: 1024px) {
    .row--item .item .image-desktop{
        display: none !important;
    }
    .row--item .item .image-mobile{
        display: block !important;
    }
} */
