.countdown {
       position: relative;
            display: grid;
            grid-template-columns: repeat(4, auto);            
            font-family: Arial, sans-serif;
            gap: 5px;
             justify-content: center;
          align-items: center;
        }

     .countdown    .unit {
    
            text-align: center;
            width: 80px;
            
        }
  .countdown    .flip {
            position: relative;
            width: 70px;
            height: 80px;
            perspective: 400px;
        }
    .countdown     .label {
            margin-top: 8px;
            font-size: 12px;
            text-transform: uppercase;
            color: #fff;
        }



    .countdown     .card {
            position: absolute;
            inset: 0;

            background: var(--color-red-3);
            color: var(--color-white);
            border-radius: 8px;

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 35px;
            font-weight: bold;

            transform-origin: center center;
            backface-visibility: hidden;
        }

@media (min-width: 768px) {
}
@media (min-width: 1024px) {
       .countdown    .unit {
    
    
            width: 130px;
            
        }
    .countdown    .flip {
            position: relative;
            width: 130px;
            height: 160px;
            perspective: 400px;
        }
      .countdown     .card {
 

            font-size: 75px;

        }
}