.countdown{
max-width:800px;
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:100px;
height: 110px;
aspect-ratio:1;
background: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
    backdrop-filter: blur(45px) !important;
    -webkit-backdrop-filter: blur(45px);
    overflow: hidden;
}

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

.circle span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-48%);
font-family:'Tipografia-principal',serif;
font-size:3rem;
color:#06142a;
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.2rem;
color:#fff;
}

@media(max-width:900px){

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

.circle{
width:180px;
}

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

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

}

@media(max-width:520px){

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

.circle{
        width: 90px;
        height: 90px;
}

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

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

}