﻿

.video-section {
    /*height: calc(100vh - 72px);*/
    max-height: 100vh;
    width: 100vw;
    position: relative;
}

    .video-section .buttons-container,
    .video-section .placeholder-img-container {
        position:absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .video-section .video {
        z-index: 1;
        width: auto;
        height: 100%;
        display: flex;
        justify-content: center;
    }

        .video-section .video {
            max-height: 100%;
        }
        /*.video-section .video,
        .video-section .video video.charging-video {
            max-height: 100%;
        }*/
        .video-section .video video.charging-video {
            aspect-ratio:16/9;
            max-width: 100%;
            max-height:100vh;
        }

    .video-section .buttons-container {
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 3;
    }

        .video-section .buttons-container button {
            background: transparent;
            font-size: clamp(3rem, 1.1538rem + 5.1282vw, 5rem);
            padding-top: 2rem;
            width: auto;
            height: 100%;
            aspect-ratio: 16/9;
        }

            .video-section .buttons-container button:hover {
                font-size: 6rem;
            }

            .video-section .buttons-container button.pause-button {
                opacity: 0;
                transition: all .5s ease-in-out;
            }

                .video-section .buttons-container button.pause-button:hover {
                    opacity: .5;
                }

    .video-section .placeholder-img-container {
        z-index: 1;
        transition: opacity 0.5s ease;
    }

        .video-section .placeholder-img-container img {
            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 100%;
        }

@media (min-width: 992px) {
    .video-section {
        /*height: calc(100vh - 112px);*/        
    }        
}