@use "helpers";

#bannertopo{
    .banners{
        display: block;
        width: 100%;

        .item{
            display: block;
            outline: 0px;

            img {
                aspect-ratio: 95 / 23;
                object-fit: cover;
                display: block;
                width: 100%;

                @media(max-width: 767px) {
                    aspect-ratio: 640 / 357;
                }
            }
        }
        
        .banner-video{
            display: block;
            width: 100%;
            
            iframe{
                position: absolute;
                display: block;
                width: 100%; 
                height: 100%;
            }
        }
    }

    .owl-dots{
        position: absolute;
        left: 0px;
        bottom: 50px;
        justify-content: center;
        
        @media(max-width:767px){
            bottom: 15px
        }

        .owl-dot{
            background-color: helpers.$light !important;
            opacity: 0.2;

            &.active{
                background-color: helpers.$light !important;
                opacity: 1;
            }
        }
    }
}

#bannerpromo {
    position: relative;
    .item {
        width: 100%;
        img {
            aspect-ratio: 24 / 1;
            object-fit: cover;
            width: 100%;
        }
    }

    .banner-cronometro {
        position: absolute;
        left: 0;
        right: 0;
        color: #fff;
        font: normal 14px helpers.$fontRegular;
        z-index: 100;
        max-width: 1275px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100%;

        .timer {
            display: flex;
            gap: 20px;
            margin-right: 41px;

            .tempo {
                .horas, .minutos, .segundos, .centesimos {
                    font: normal 36px helpers.$fontBold !important;
                }
                font: normal 10px helpers.$fontRegular;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }

        @media(max-width: 767px) {
            position: inherit;
            justify-content: center;
            background-color: helpers.$highlight;
            color: white;
            padding: 10px 0;

            .timer {
                margin: 0;
            }
        }

    }
}