.section-countdown {
    background-image: url('../images/countdown-background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--white);
    text-align: center;
    --digit-gap-width: 5rem;
    --digit-width: 10rem;
    --digit-font-size: 119px;
}

.narrow .section-countdown {
    --digit-gap-width: 3rem;
}

.section-countdown .region {
    margin: 0 auto;
    padding: var(--margin-m);
}

.content-components > .section-countdown .region {
    max-width: 1000px;
}

.sidebar-layout-main-content > .section-countdown .region {
    max-width: 100%;
}

.section-countdown .header,
.section-countdown .sub-header {
    color: var(--white);
    text-align: center;
}

.section-countdown .header::before,
.section-countdown .sub-header::before {
    content: none;
}

.section-countdown [data-time-value] {
    display: none;
}

.section-countdown[class*=days] [data-time-value=days] {
    display: block;
}

.section-countdown[class*=hours] [data-time-value=hours] {
    display: block;
}

.section-countdown[class*=minutes] [data-time-value=minutes] {
    display: block;
}

.section-countdown[class*=seconds] [data-time-value=seconds] {
    display: block;
}

.section-countdown .time-parts {
    display: grid;
    grid-column-gap: var(--digit-gap-width);
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.sidebar-layout-main-content > .section-countdown[class*=seconds] .time-parts {
    grid-column-gap: 2rem;
}

.section-countdown .time-parts .line {
    background-color: var(--scarlet);
    border: none;
    height: 4px;
    width: 80%;
}

.section-countdown.sub-part-count-1 .time-parts {
    grid-template-columns: repeat(1, var(--digit-width));
}

.section-countdown.sub-part-count-2 .time-parts {
    grid-template-columns: repeat(2, var(--digit-width));
}

.section-countdown.sub-part-count-3 .time-parts {
    grid-template-columns: repeat(3, var(--digit-width));
}

.section-countdown.sub-part-count-4 .time-parts {
    grid-template-columns: repeat(4, var(--digit-width));
}

.section-countdown .time-parts .time-part {
    text-align: center;
}

.section-countdown .time-parts .time-part > * {
    display: block;
    line-height: 1;
}

.section-countdown .time-parts .time-part [data-role~=time-value] {
    font-size: var(--digit-font-size);
}

.section-countdown .time-parts .time-part [data-role~=time-label] {
    font-size: 15px;
    margin-top: 10px;
    text-transform: uppercase;
}

.section-countdown .link-as-button {
    margin-bottom: 20px;
    margin-top: 60px;
}

@media (max-width: 75em) {
    .section-countdown {
        --digit-gap-width: 2rem;
        --digit-width: 5rem;
        --digit-font-size: 62px;
    }
}

@media (max-width: 30em) {
    .section-countdown {
        --digit-gap-width: 1rem;
    }

    .section-countdown .region {
        padding-left: 0;
        padding-right: 0;
        max-width: 95vw !important;
    }

    .sidebar-layout-main-content > .section-countdown[class*=seconds] .time-parts {
        grid-column-gap: var(--digit-gap-width);
    }
}

@media (max-width: 25em) {
    .section-countdown {
        --digit-width: auto;
    }
}