@media (min-width: 320px) {

    #home-logo {
        width: auto;
        height: 30vh;
        max-height: 200px;
        top: 72%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #home-open-popup-btn {
        width: 15vh;
        height: 15vh;
        top: 57%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-position-x: 0%;
        background-position-y: 0%;
    }

    #home-hero {
        width: 100%;
        height: var(--page-height);
        background-size: auto 190vh;
        background-position: top center;
        margin: 0;
        padding: 0;
    }

    #home-open-registration-btn {
        height: 12vh;
        width: calc(12vh * (470 / 160));
        top: 90%;
        left: 50%;
        background-position: center;
        z-index: 2;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 576px) {}

@media (min-width: 768px) {
    #close-popup-yt-btn {
        width: 45px;
        height: 45px;
    }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    #home-logo {
        top: 45%;
        left: 20%;
        width: 500px;
        height: auto;
        max-height: none;
    }

    #home-open-popup-btn {
        top: 67%;
    }

    #close-popup-yt-btn {
        --popup-yt-width: min(100%, 1400px);
        top: 2%;
        right: max(calc((100% - var(--popup-yt-width)) / 2 - 200px), 2%);
        width: 50px;
        height: 50px;
    }

    #home-hero {
        top: 0%;
        right: -20%;
        background-size: 1500px auto;
        background-position-x: 0%;
        background-position-y: 0%;
    }

    #home-open-registration-btn {
        width: 470px;
        height: 160px;
        top: 83%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 1452px) {}

@media (min-width: 1700px) {
    #home-logo {
        width: 600px;
    }

    #home-hero {
        right: -33%;
    }
}