:root {
    --sp-container-max-width-md: 720px;
}


@media screen and (min-width: 768px) {
    .container {
        max-width: var(--sp-container-max-width-md);
        --bs-gutter-x: 1.5rem;
    }

    .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1.15rem;
    }

    /* .card.large {
        aspect-ratio: 4/3;
        height: auto;
    }

    .card {
        aspect-ratio: 9/2;
        width: var(--sp-container-max-width-xxl) * 0.47;
        width: calc(var(--sp-container-max-width-lg) * 0.47);
        height: auto;
    } */

    .card.large {
        aspect-ratio: 136 / 100;
        /* width: var(--sp-container-max-width-md) * 0.47; */
        /* width: calc(var(--sp-container-max-width-lg) * 0.47); */
        /* height: 100%; */
        /* height: auto; */
    }

    .card {
        aspect-ratio: 54 / 10;
        /* width: var(--sp-container-max-width-md) * 0.47; */
        /* width: calc(var(--sp-container-max-width-lg) * 0.47); */
        /* height: auto; */
    }

    .card-title {
        font-size: 22px;
    }

    .card-subtitle {
        font-size: 16px;
    }

    .card-text {
        font-size: 16px;
    }

    .card.large .card-title {
        font-size: 26px;
    }

    .card.large .card-text {
        font-size: 18px;
    }

    .card.large .card-subtitle {
        font-size: 18px;
    }

}