.container {
width: 100%;
max-width: 1200px;
margin-bottom: 30px;
margin-top: -10px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
}

.timer-container {
padding: 6px 24px;
border-radius: 30px;
display: flex;
gap: 2px;
background: #202020;
color: #ffffff;	  
font-family: 'Roboto', sans-serif;      
}

.timer-item {
padding-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
min-width: 60px;
}

.timer-value {
font-size: 1.6rem;
font-weight: bold;
}

.timer-label {
font-size: 0.75rem;
text-transform: uppercase;
}

@media (max-width: 768px) {
.container {
margin-bottom: 10px;
margin-top: -30px;
}
.timer-container {
flex-wrap: wrap;
justify-content: center;
padding: 4px 16px; /* опционально: уменьшить padding для компактности */
}

.timer-item {
min-width: 48px; /* опционально: немного сузить элементы */
padding-top: 8px;
}

.timer-value {
font-size: 1.3rem; /* было 1.6rem */
}

.timer-label {
font-size: 0.65rem; /* было 0.75rem */
}
}