﻿:where(.list-facts *) {
    margin-top: 0;
}

.list-facts {
    --region-media-mask: 0;
    --region-vertical-top-padding: clamp(2rem, 0.68rem + 4.8vw, 5rem);
    --region-vertical-bottom-padding: 81.3636dvw;
    position: relative;
    isolation: isolate;
    min-height: 0 !important;
}

@media (width > 48rem) {
    .list-facts {
        --region-vertical-bottom-padding: clamp(2rem, 0.68rem + 4.8vw, 5rem);
        --_columns: 8;
    }
}

@media (width > 80rem) {
    .list-facts {
        --_columns: 12;
    }
}

.list-facts__media {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: -1;
}

.list-facts__media__image,
.list-facts__media__video {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: right bottom;
}

@media (width <= 48rem) {
    .list-facts__media__video {
        display: none;
    }
}

@media (width > 48rem) {
    .list-facts__media__image {
        display: none;
    }
}

.list-facts__media__video {
}

.list-facts__grid {
    container: facts / inline-size;
    display: grid;
    gap: 0 1.5rem;
    grid-template-columns: repeat(var(--_columns, 4), minmax(0, 1fr));
}

.list-facts__item {
    display: contents;
}

    .list-facts__item[data-index="1"],
    .list-facts__item[data-index="2"],
    .list-facts__item[data-index="3"] {
        --_item-figure: 1 / -1;
        --_item-caption: 2 / -1;
    }

@media (width > 48rem) {
    .list-facts__item[data-index="2"] {
        --_item-figure: 4 / -1;
        --_item-caption: 5 / -1;
    }
}

@media (width <= 48rem) {
    .list-facts__item[data-index="2"] .list-facts__item__figure {
        margin-block-start: 1rem;
    }

    .list-facts__item[data-index="2"] .list-facts__item__caption {
        margin-block-end: 1rem;
    }
}

@media (width > 80rem) {
    .list-facts__item[data-index="1"] {
        --_item-figure: 1 / span 5;
        --_item-caption: 4 / span 4;
        --_item-figure-row: 2;
        --_item-caption-row: 3;
    }

    .list-facts__item[data-index="2"] {
        --_item-figure: 6 / -1;
        --_item-caption: 7 / -1;
        --_item-figure-row: 1;
        --_item-caption-row: 2;
    }

    .list-facts__item[data-index="3"] {
        --_item-figure: 8 / -1;
        --_item-caption: 9 / -1;
        --_item-figure-row: 3;
        --_item-caption-row: 4;
    }
}

/* @link https://utopia.fyi/clamp/calculator?a=440,1440,110-180 */
.list-facts__item__figure {
    grid-column: var(--_item-figure);
    grid-row: var(--_item-figure-row, auto);
    font-size: clamp(6.875rem, 4.95rem + 7vw, 11.25rem);
    font-weight: 500;
    line-height: 1;
}

/* @link https://utopia.fyi/clamp/calculator?a=440,1368,30-42 */
.list-facts__item__caption {
    grid-column: var(--_item-caption);
    grid-row: var(--_item-caption-row, auto);
    font-size: min(clamp(1.875rem, 1.5194rem + 1.2931cqi, 2.625rem), max(7dvw, 1.5rem));
    font-weight: 300;
    line-height: 1.1333;
}
