/* ####################################
   Counter

   - Critical Rendering Path: Recommended
   ################################## */

.counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .counter .label {
        order: 2;
        padding-bottom: 30px;
        text-align: center;
        font-size: 150%;
        font-weight: bold;
    }

    .counter .count {
        order: 1;
        text-align: center;
        font-weight: bold;
        font-size: var(--site-font-size-mega);
        color: var(--site-color-ui-mid);
    }

        .counter .count .unit {
            margin-left: 3px;
        }

            .counter .count .unit.percent {
            }

            .counter .count .unit.mm {
            }

            .counter .count .unit.m {
            }

            .counter .count .unit.km {
            }

    .counter + .counter {
        border-top-width: 1px;
    }

    .counter.box {
        margin: 0 auto; /* Centred within container. */
        width: 240px;
        height: 240px;
        background: var(--site-color-ui-lightest);
    }

    .counter.circle {
        margin: 0 auto; /* Centred within container. */
        width: 240px;
        height: 240px;
        background: var(--site-color-ui-lightest);
        border-radius: 100%;
    }

    .counter.border {
        border-color: var(--site-color-ui-light);
        border-width: var(--site-border-width);
        border-style: solid;
    }

    .counter.background-none {
        background-color: transparent;
    }

    .counter.small {
        font-size: 75%;
    }

    .counter.box.small,
    .counter.circle.small {
        width: 180px;
        height: 180px;
    }

    .counter.big {
        font-size: 133.33%;
    }

    .counter.box.big,
    .counter.circle.big {
        width: 320px;
        height: 320px;
    }

    .counter.tile {
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
    }

        .counter.tile img {
            width: 30%;
            max-width: 90px !important;
        }

        .counter.tile .label {
            width: 100%;
            font-size: 100%;
            text-align: left;
            padding-block: 0px;
        }

            .counter.tile .label .number {
                font-size: 175%;
                margin-bottom: 5px;
            }

            .counter.tile .label .text {
            }