/* Timer */
.timer {
    display: flex;
    justify-content: space-between;
    gap: 56px;
    margin: 0 0 50px;
    padding: 0;
}

.timer, .timer * {
    font-weight: 200;
}

.time-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: var(--iday-green);
    border-radius: 1.25rem;
    overflow: hidden; 
    transition: all .6s;
    
    /* opacity: 0;
    transform: translateY(100%); */
}

.page-section.active .time-box {
    /* opacity: 1;
    transform: translateY(0); */
}

.time-box.day {
    background-color: var(--color-highlight);
}

.time-box time {
    padding-block: 64px;
    font-size: 100px;
    text-align: center;
    max-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0;
    color: var(--color-time-green);
    transition: all .3s;
    transform: translateY(0);
}

.time-box p {
    margin-block: auto 0;
    padding-block: 18px;
    text-align: center;
    background-color: var(--color-main-green-darker);
    color: var(--color-dark-green);
    font-weight: 400;
}

.time-box.day p {
    font-size: 20px;
    background-color: var(--color-highlight-darker);
}

/* New Timer Styles */
.timer .time-box p {
    z-index: 1;
}

.timer .time-box.day time {
    color: #693100;
}

.timer .time-box.day p {
    color: #361B03;
}

.timer .time-box time.active {
    transform: translateY(calc(100% / 3));
}

.timer .time-box time div {
    margin-top: calc(-100% / 2 + 40px);
}

.timer .time-box time span {
    width: 100%;
    display: block;
    font-weight: 200; 
    scale: .8;
    opacity: .2;
    transition: all .3s;
}

.timer .time-box:not(:last-child) time span {
    opacity: 0;
}

 .timer .time-box time div span:nth-child(3) {
    box-sizing: border-box;
    opacity: 1;
    scale: 1;
}

/* Responsive */
/* Desktop */
@media (min-width: 1281px) and (max-width: 1920px) { 
    /* Timer */
    .timer { 
        gap: calc(56vw / 19.2); 
        margin: 0 0 calc(50vw / 19.2); 
    }

    .time-box time { 
        max-height: calc(240vw / 19.2); 
        padding-block: calc(64vw / 19.2); 
        font-size: calc(100vw / 19.2); 
    }

    .time-box p { 
        padding: calc(18vw / 19.2); 
    }

    .timer .time-box time div { 
        margin-top: calc(-100% / 2 + (40vw / 19.2)); 
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1280px) { 
    /* Timer */
    .timer { 
        gap: calc(12vw / 12.8); 
    }

    .time-box time { 
        max-height: 192px; 
        padding-block: 36px; 
    }

    .time-box p { 
        font-size: 16px; 
    }

    .timer .time-box time div { 
        margin-top: calc(-100% / 2); 
    }
}

/* Mobile */
@media (max-width: 768px) { 
    /* Timer */
    .timer { 
        gap: 10px; 
            }

    .time-box time { 
        padding-block: 28px; 
        font-size: calc(80vw / 7.68); 
    }

    .time-box p { 
        padding-block: 5px; 
    }

	.timer .time-box time { 
        max-height: calc(94vw / 7.68); 
	}

    .timer .time-box time div { 
        margin-top: calc(-100% / 2 - 4px); 
    }

    .timer .time-box time div span:nth-child(3) { 
        font-size: calc(72vw / 7.68); 
    }
}