.background_landscape[data-media="landscape"] {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;

    height: 100vh;
    width: 100%;

    opacity: 0;
    overflow: hidden;

    background-color: var(--color-blue);

    animation: background_main 0.5s ease-in-out 0s 1 forwards paused;
}
        @keyframes background_main {
            0% {opacity: 0;}
            100% {opacity: 1;}
        }
        .background_landscape[data-media="portrait--mobile"], .background_landscape[data-media="portrait--PC"] {
            display: none;
        }
    .background_landscape[data-media="landscape"] > img {
        /* бекграунд должен обязательно быть 1920х1200 */
        position: relative;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);

        height: calc(1200px * var(--scale_1200)); /* обязательно 1200, чтобы при приближении к соотношению сторон 1:1 внизу не было пустоты */
        width: auto;
    }
.background_portraite[data-media="portrait--mobile"], .background_portraite[data-media="portrait--PC"] {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;

    height: 100vh;
    width: 100%;

    opacity: 0;
    overflow: hidden;

    animation: background_main 0.5s ease-in-out 0s 1 forwards paused;
}
        .background_portraite[data-media="landscape"] {
            display: none;
        }
    .background_portraite[data-media="portrait--mobile"] > img, .background_portraite[data-media="portrait--PC"] > img {
        /* бекграунд должен обязательно быть 1200х1200 */
        position: relative;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);

        height: 100%;            
    }