.launch-countdown {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        var(--lcd-top-padding) 24px var(--lcd-bottom-padding);

    background-color:
        var(--lcd-section-bg);

    box-sizing: border-box;
}


.launch-countdown *,
.launch-countdown *::before,
.launch-countdown *::after {
    box-sizing: border-box;
}


/* ==============================
   Background
   ============================== */

.launch-countdown__background {
    position: absolute;

    inset: 0;

    z-index: 0;
}


.launch-countdown__background-image {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* ==============================
   Main Layout
   ============================== */

.launch-countdown__inner {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(260px, 1fr) 1px auto;

    align-items: center;

    gap: 72px;

    width: 100%;

    max-width: var(--lcd-max-width);

    margin: 0 auto;
}


/* ==============================
   Heading
   ============================== */

.launch-countdown__label {
    display: block;
    margin-top: 12px;
    color: var(--lcd-label-color, #4A7D4D) !important;
    font-family: inherit;
    font-size: var(--lcd-label-size);
    line-height: 1.2;
    font-weight: 500;
    text-align: center;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap;
}


.launch-countdown__heading {
    margin: 0;

    color:
        var(--lcd-heading-color);

    font-family: inherit;

    font-size:
        var(--lcd-heading-size);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -0.02em;

    text-transform: uppercase;
}


/* ==============================
   Divider
   ============================== */

.launch-countdown__divider {
    align-self: stretch;

    width: 1px;

    min-height: 144px;

    background-color:
        var(--lcd-divider-color);

    opacity: 0.65;
}


/* ==============================
   Timer
   ============================== */

.launch-countdown__timer {
    display: flex;

    align-items: flex-start;

    justify-content: flex-end;

    gap: var(--lcd-gap);

    min-width: 0;
}


.launch-countdown__time-unit {
    display: flex;

    flex-direction: column;

    align-items: center;

    flex: 0 0 auto;
}


/* ==============================
   Card
   ============================== */

.launch-countdown__card {
    display: flex;

    align-items: center;

    justify-content: center;

    width: var(--lcd-card-width);

    height: var(--lcd-card-height);

    border-radius:
        var(--lcd-card-radius);

    background:
        var(--lcd-card-bg);

    overflow: hidden;
}


.launch-countdown__number {
    color:
        var(--lcd-card-text);

    font-family: inherit;

    font-size:
        var(--lcd-number-size);

    line-height: 1;

    font-weight: 700;

    font-variant-numeric:
        tabular-nums;

    letter-spacing: -0.03em;
}


/* ==============================
   Label
   ============================== */

.launch-countdown__label {
    margin-top: 10px;

    color:
        var(--lcd-label-color);

    font-family: inherit;

    font-size:
        var(--lcd-label-size);

    line-height: 1.2;

    font-weight: 500;

    text-align: center;
}


/* ==============================
   Colon
   ============================== */

.launch-countdown__colon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 12px;

    height: var(--lcd-card-height);

    color:
        var(--lcd-colon-color);

    font-family: inherit;

    font-size: 28px;

    line-height: 1;

    font-weight: 700;
}


/* ==============================
   Ended
   ============================== */

.launch-countdown__ended {
    grid-column: 3;

    color:
        var(--lcd-heading-color);

    font-family: inherit;

    font-size: 30px;

    font-weight: 700;

    text-align: center;
}


/* ==============================
   Tablet
   ============================== */

@media (max-width: 1100px) {

    .launch-countdown__inner {
        gap: 36px;
    }


    .launch-countdown__heading {
        font-size:
            min(var(--lcd-heading-size), 32px);
    }


    .launch-countdown__card {
        width:
            min(var(--lcd-card-width), 88px);

        height:
            min(var(--lcd-card-height), 88px);
    }


    .launch-countdown__number {
        font-size:
            min(var(--lcd-number-size), 38px);
    }


    .launch-countdown__colon {
        height: 88px;
    }

}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 767px) {

    .launch-countdown {
        padding-left: 16px;

        padding-right: 16px;
    }


    .launch-countdown__inner {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 24px;
    }


    .launch-countdown__heading-wrap {
        width: 100%;

        justify-content: center;
    }


    .launch-countdown__heading {
        width: 100%;

        font-size: 24px;

        line-height: 1.2;

        font-weight: 600;

        text-align: center;

        letter-spacing: normal;
    }


        .launch-countdown__divider {
            width: 72px;
            min-height: 1px;
            height: 1px;
    
            align-self: center;
            margin-left: auto;
            margin-right: auto;
        }


    .launch-countdown__timer {
        justify-content: center;

        width: 100%;

        gap: 5px;
    }


    .launch-countdown__card {
        width: clamp(62px, 18vw, 78px);

        height: clamp(62px, 18vw, 78px);

        border-radius:
            min(var(--lcd-card-radius), 12px);
    }


    .launch-countdown__number {
        font-size:
            clamp(27px, 8vw, 36px);
    }


    .launch-countdown__colon {
        width: 7px;

        height: clamp(62px, 18vw, 78px);

        font-size: 20px;
    }


    .launch-countdown__label {
        margin-top: 7px;

        font-size:
            min(var(--lcd-label-size), 12px);
    }


    .launch-countdown__ended {
        font-size: 24px;
    }

}


/* ==============================
   Very Small Mobile
   ============================== */

@media (max-width: 390px) {

    .launch-countdown__timer {
        gap: 3px;
    }


    .launch-countdown__card {
        width: 60px;

        height: 60px;
    }


    .launch-countdown__colon {
        width: 5px;

        height: 60px;

        font-size: 18px;
    }


    .launch-countdown__number {
        font-size: 27px;
    }


    .launch-countdown__label {
        font-size: 10px;
    }

}


/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {

    .launch-countdown *,
    .launch-countdown *::before,
    .launch-countdown *::after {
        transition: none !important;

        animation: none !important;
    }

}