.countdown{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:35px;
justify-items:center;
align-items:center;
}

.card{
text-align:center;
background-color: transparent !important;
border: none !important;
}

.circle{
position:relative;
width:220px;
aspect-ratio:1;
}

.circle img{
width:100%;
display:block;
user-select:none;
pointer-events:none;
}

.circle span{
position:absolute;
top:44%;
left:50%;
transform:translate(-50%,-45%);
font-family:'Tipografia-titulo',serif;
font-size:5rem;
color:#fff;
letter-spacing:2px;
transition:
opacity .35s ease,
transform .35s ease;
}

.circle span.animate{
opacity:0;
transform:
translate(-50%,-70%);
}

.card p{
margin-top:5px;
font-family:'Tipografia-principal',serif;
font-size:1.5rem;
color:#fff;
}

@media(max-width:900px){

.countdown{
grid-template-columns:repeat(2,1fr);
gap:30px;
}

.circle{
width:180px;
}

.circle span{
font-size:4rem;
}

.card p{
font-size:1.2rem;
}

}

@media(max-width:520px){

.countdown{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.circle{
width:145px;
}

.circle span{
font-size: 4rem;
}

.card p{
font-size:1.2rem;
}

}