/* .countdown {
        width: fit-content;
        display: inline-grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 1rem;
    } */

    .countdown {
        width: fit-content;
        display: inline-grid;
        grid-auto-flow: column;
        grid-auto-columns: .5fr;
        gap: .25rem;
        background: #000000a6;
        border-radius: 20px;
        padding: 10px;
        color: white;
        position: fixed;
        bottom: 15px;
        right: 25px;
    }

    .countdown>.part {
        display: grid;
        /* gap: 0.5rem; */
    }

    .countdown>.part>.number {
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        /* border-radius: 50%; */
        /* border: 1px solid hsl(0 0% 50% / .5); */
        font-size: 3.75rem;
        position: relative;
        /* background: #d5d0c7; */
        background: transparent;
    }

    .colon {
        font-size: 3.75rem;
    }

    .countdown>.part.days {
        --num: 365
    }

    .countdown>.part.hours {
        --num: 24
    }

    .countdown>.part:where(.minutes, .seconds) {
        --num: 60
    }

    /* .countdown>.part>.number::after {
        content: "";
        position: absolute;
        inset: calc(var(--border-size) * -0.5);
        border-radius: inherit;

        --degree: calc(360deg / var(--num) * (var(--num) - var(--value, 0)));
        background-image: conic-gradient(var(--accent) var(--degree), transparent calc(var(--degree) + 0.1deg));

        --border-size: 4px;
        --mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px));
        -webkit-mask-image: var(--mask-image);
        mask-image: var(--mask-image);
    } */

    .countdown>.part>.text {
        text-align: center;
        opacity: 1;
        text-transform: capitalize;
        font-weight: bold;
        font-size: 1.25rem;
    }

    @media screen and (min-width:0) and (max-width: 1300px) {

        .countdown>.part>.number,
        .colon {
            font-size: 2.75rem;
        }

        .countdown>.part>.text {
            font-size: 1.25rem;
        }

        .colon {
            padding-top: 8px;
        }
    }

    @media only screen and (min-device-width: 0px) and (max-device-width: 992px) and (orientation: landscape) {

        .countdown>.part>.number,
        .colon {
            font-size: 1.5rem;
        }

        .countdown>.part>.text {
            font-size: 1rem;
        }

        .colon {
            padding-top: 8px;
        }
    }