/**
 * Styling for the counter module.
 */

.counter-module {
    max-width: unset;
    padding: 0;
    background-color: var(--color-bg-surface-1);
}

.counter-module.brand-black {
    background-color: var(--color-primary-black-900);
}
.theme-dark .counter-module.brand-black {
    background-color: var(--color-primary-black-50);
}
.counter-module.brand-red {
    background-color: var(--color-primary-red-600);
}
.theme-dark .counter-module.brand-red {
    background-color: var(--color-primary-red-300);
}

.counter-module .contents {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-12) var(--default-padding);
    box-sizing: border-box;
}

.counter-module .heading-and-blurb {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-7);
    text-align: center;
}

.counter-module.brand-black .heading-and-blurb .heading,
.counter-module.brand-red .heading-and-blurb .heading {
    color: var(--color-grey-50);
}
.theme-dark .counter-module.brand-black .heading-and-blurb .heading,
.theme-dark .counter-module.brand-red .heading-and-blurb .heading {
    color: var(--color-grey-1000);
}

.counter-module .heading-and-blurb .blurb {
    color: var(--color-copy-secondary);
}
.counter-module.brand-black .heading-and-blurb .blurb {
    color: var(--color-grey-550);
}
.theme-dark .counter-module.brand-black .heading-and-blurb .blurb {
    color: var(--color-grey-450);
}
.counter-module.brand-red .heading-and-blurb .blurb {
    color: var(--color-grey-150);
}
.theme-dark .counter-module.brand-red .heading-and-blurb .blurb {
    color: var(--color-grey-950);
}

section.counter-module .data-points {
    grid-row-gap: var(--spacing-12);
}

section.counter-module .data-points .data-point {
    grid-column: span 4;
}
section.counter-module .data-points .data-point.span-1 {
    grid-column: 5 / 9;
}
section.counter-module .data-points .data-point.span-2:nth-last-child(2) {
    grid-column: 3 / 7;
}
section.counter-module .data-points .data-point.span-2:nth-last-child(1) {
    grid-column: -7 / -3;
}
section.counter-module .data-points .data-point.span-4 {
    grid-column: span 3;
}

/* Breakpoint S */
@media screen and (min-width: 0) and (max-width: 768px) {
    section.counter-module .data-points .data-point.span-1,
    section.counter-module .data-points .data-point.span-2:nth-last-child(2),
    section.counter-module .data-points .data-point.span-2:nth-last-child(1),
    section.counter-module .data-points .data-point.span-4 {
        grid-column: span 4;
    }
}