.site-main-page {
    .main-promo {
        width: 100%;
        height: 100dvh;
        h1 {
            display: none;
        }
        .promo-slider {
            position: relative;
            width: 100%;
            height: calc(100% - 0px);
            /* transition: height .18s ease-out; */
            .items {
                position: relative;
                display: grid;
                grid-template-columns: 100%;
                grid-template-rows: 1fr;
                height: 100%;
                .slide {
                    position: absolute;
                    column-gap: 1/2;
                    grid-row: 1/2;
                    height: 100%;
                    width: 100%;
                    opacity: 0;
                    animation: imageSlide2 14.7s linear infinite;
                    &:nth-child(2) {
                        animation-delay: 2.8s;
                    }
                    &:nth-child(3) {
                        animation-delay: 6.53s;
                    }
                    &:nth-child(4) {
                        animation-delay: 10.63s;
                    }
                    :is(source, img) {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
        
    }
    main {
        position: relative;
        z-index: 2;
        transition: .5s linear;
        overflow: hidden;
    }
}
@keyframes imageSlide2 {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    35% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}