.countdown-container {
    position:relative;
    width: 100%;
    padding: 20px 0;
}

.countdown {
    --countdown-number-color: hsl(0, 0%, 100%);
    --countdown-text-color: hsl(0, 0%, 100%);
    --dot-color: hsl(0, 0%, 22%);
    --dot-color-remaining: #8b7641;
    --dot-color-active: #ee2328;

    font-family: 'PublicSans';
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: min(30rem, 100%);
    margin-inline: auto;
    container: inline-size;
    /* background: linear-gradient(to left, #f72b84cc, #f65c79cc, #f58d6fcc); */
    position: sticky;
    top: calc(50% - 120px);
    left: 50%;
    transform: translateX(-50%);


    >.part {
        padding: 5 5;
/*        aspect-ratio: 1/1;*/
        display: grid;
        place-items: center;

        >.remaining {
            padding: 25px 25px;
            grid-area: 1/1;
            color: hsl(0 0% 100%);
            display: grid;
            text-align: center;
            font-size: 1.8rem;

            >.number {
                color: var(--countdown-number-color);
            }

            >.text {
                color: var(--countdown-text-color);
                text-transform: uppercase;
                font-size: .7rem;
            }
        }

        >.dot-container {
            grid-area: 1/1;
            height: 100%;
            width: 4%;
            rotate: calc(360deg / var(--dots) * var(--dot-idx));

            >.dot {
                width: 100%;
                aspect-ratio: 1/1;
                background-color: var(--dot-color);
                border-radius: 50%;
                transition: background-color .25s;

                &[data-active=true] {
                    background-color: var(--dot-color-remaining);

                    &[data-lastactive=true] {
                        background-color: var(--dot-color-active);
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 991px) {
    .countdown {
        position: relative;
        left: auto;
        transform: none;
        /* top: calc(50% - 80px); */
        width: min(22rem, 100%);

        >.part {

            >.remaining {
                font-size: 1.3rem;
                padding: 15px 15px;
                >.text {
                    font-size: .5rem;
                }
            }
        }    
    }
    
    .countdown-container {
        background: black;
        padding: 4px;
    }
}
/* 
@media screen and (max-width: 767px) {
    .countdown {
        top: calc(50% - 70px);
        width: min(20rem, 100%);

        >.part {

            >.remaining {
                font-size: 1.3rem;
    
                >.text {
                    font-size: .5rem;
                }
            }
        }    
    }
}

@media screen and (max-width: 576px) {
    .countdown {
        top: calc(50% - 62px);
        width: min(18rem, 100%);

        >.part {

            >.remaining {
                font-size: 1rem;
    
                >.text {
                    font-size: .5rem;
                }
            }
        }    
    }
    
} */