#contador{width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; text-align: center; gap: 10px;}
#contador.desativa{display: none;}

#contador span{font-family: "TT Firs Neue", Sans-serif; font-size: 36px; font-weight: 600; line-height: 36px;}

#contador span.s, #contador span.h, #contador span.m{width: 90px; height: 90px; background-color: #fff; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 44px; font-weight: 600; line-height: 44px; position: relative;}

#contador span i{font-size: 12px; font-style: normal; font-weight: 500; line-height: 12px; display: block; margin-top: 2px;}

#botao-oferta{width: max-content; height: 90px; padding: 5px 30px; background-color: transparent; background-image: linear-gradient(180deg, #7cdf80 0%, #4caf50 100%); color: #fff; font-size: 22px; font-weight: 800; border-radius: 10px; margin: 0 auto 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; border: 5px solid #fff; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);}
#botao-oferta.ativa{display: flex;}

#botao-oferta:after{width: 25px; height: 25px; content: ""; background-color: #fff; background-image: url(seta.svg); background-position: center; background-repeat: no-repeat; background-size: 100%; display: block; border-radius: 100%;}

#botao-oferta:hover{background-image: linear-gradient(180deg, #6abdff 0%, #2196f3 100%);}

@media(max-width:1200px){
    #contador{gap: 5px;}
    #contador span.s, #contador span.h, #contador span.m{width: 65px; height: 65px; font-size: 34px; line-height: 34px;}
    #contador span i{font-size: 10px; line-height: 10px;}
}