.multi-video-section {
    border-radius: 24px;
    border: 1px solid #EBEBEB;
    background: radial-gradient(71.9% 62.07% at 50% 50%, rgba(255, 255, 255, 0.00) 0%, rgba(253, 249, 249, 0.60) 100%), #A7D7FF;
    margin-left: 32px;
    margin-right: 32px;
    padding: 32px;
    position: relative;
    @media(max-width: 1100px) {
        padding: 32px 24px 32px 24px;
    }
    @media(max-width: 1070px) {
        padding: 80px 24px 24px 24px;
    }
    @media(max-width: 768px) {
        margin-left: 16px;
        margin-right: 16px;
    }
}

.multi-video.count-triple {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    justify-content: center;
    max-width: 536px;
    justify-items: center;
    margin: auto;
    @media(max-width: 1070px) {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.multi-video.count-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    justify-content: space-around;
    max-width: 436px;
    margin: auto;
    gap: 16px;
    @media(max-width: 1070px) {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.multi-video.count-single {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
}

.multi-video .single-video {
    border-radius: 36px;
    border: 0.35px solid var(--White, #FFF);
    max-width: 210px;
    height: 400px;
    position: relative;
    padding: 4px;
    cursor: pointer;
    @media(max-width: 1070px) {
        height: 440px;
        max-width: 225px;
        padding: 6px;
        border-radius: 44px;
    }
}

.single-video .play-icon {
    position: absolute;
    border-radius: 22.378px;
    background: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(5.594405651092529px);
    padding: 14px;
    height: 41px;
    width: 41px;
    display: flex;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}


.multi-video img, .multi-video video {
    border-radius: 36px;
    height: 391px;
         object-fit: cover;
    @media(max-width: 1070px) {
        height: 425px;
        border-radius: 40px;
    }
}

.multi-video.count-triple img, .multi-video.count-triple video {
    height: 313px;
    @media(max-width: 1070px) {
        height: 425px;
    }
}

.multi-video.count-triple .single-video {
    max-width: 168px;
    height: 320px;
    @media(max-width: 1070px) {
        height: 440px;
        max-width: 225px;
    }
}


.single-video.playing .play-icon{
    display: none;
}

.video-sound-block {
    position: absolute;
}

.multi-video .video-wrapper {
    max-width: 210px;
    @media(max-width: 1070px) {
        max-width: 225px;
    }
}

.single-video.loaded .video-sound-block:before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(https://billo.app/wp-content/uploads/2025/12/mute-on.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 8px;
    top: 15px;
    left: 15px;
    position: absolute;
}

.single-video.playing.with-sound .video-sound-block:before {
    background-image: url(https://billo.app/wp-content/uploads/2025/12/mute-none.svg);
}

.multi-video-section:before {
    content: "";
    display: inline-block;
    width: 67px;
    height: 36px;
    background-image: url(https://billo.app/wp-content/uploads/2026/05/Green-logo.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    top: 24px;
    left: 24px;
    position: absolute;
    @media(max-width: 1190px) {
        top: 4px;
        left: 0px;
    }
    @media(max-width: 1070px) {
        top: 24px;
        left: 50%;
        translate: -52% 0;
    }
}