/* Custom Ratios for Bootstrap 5 */
.ratio-1x1 {
    --bs-aspect-ratio: 100%;
}

.ratio-1x2 {
    --bs-aspect-ratio: 200%;
}

.ratio-2x1 {
    --bs-aspect-ratio: 50%;
}

.ratio-1x3 {
    --bs-aspect-ratio: 300%;
}

.ratio-3x1 {
    --bs-aspect-ratio: 33.3333333333%;
}

.ratio-1x4 {
    --bs-aspect-ratio: 400%;
}

.ratio-4x1 {
    --bs-aspect-ratio: 25%;
}

.ratio-1x5 {
    --bs-aspect-ratio: 500%;
}

.ratio-5x1 {
    --bs-aspect-ratio: 20%;
}

.ratio-3x2 {
    --bs-aspect-ratio: 66.6666666667%;
}

.ratio-2x3 {
    --bs-aspect-ratio: 150%;
}

.ratio-3x4 {
    --bs-aspect-ratio: 133.3333333333%;
}

.ratio-4x3 {
    --bs-aspect-ratio: 75%;
}

.ratio-16x9 {
    --bs-aspect-ratio: 56.25%;
}

.ratio-9x16 {
    --bs-aspect-ratio: 177.7777777778%;
}

.ratio-21x9 {
    --bs-aspect-ratio: 42.8571428571%;
}

.ratio-9x21 {
    --bs-aspect-ratio: 233.3333333333%;
}

.ratio-9x32 {
    --bs-aspect-ratio: 355.5555555556%;
}

.ratio-32x9 {
    --bs-aspect-ratio: 28.125%;
}

/* X-Small */
@media (max-width: 575px) {
    .ratio-xs-1x1 {
        --bs-aspect-ratio: 100%;
    }

    .ratio-xs-1x2 {
        --bs-aspect-ratio: 200%;
    }

    .ratio-xs-2x1 {
        --bs-aspect-ratio: 50%;
    }

    .ratio-xs-1x3 {
        --bs-aspect-ratio: 300%;
    }

    .ratio-xs-3x1 {
        --bs-aspect-ratio: 33.3333333333%;
    }

    .ratio-xs-1x4 {
        --bs-aspect-ratio: 400%;
    }

    .ratio-xs-4x1 {
        --bs-aspect-ratio: 25%;
    }

    .ratio-xs-1x5 {
        --bs-aspect-ratio: 500%;
    }

    .ratio-xs-5x1 {
        --bs-aspect-ratio: 20%;
    }

    .ratio-xs-3x2 {
        --bs-aspect-ratio: 66.6666666667%;
    }

    .ratio-xs-2x3 {
        --bs-aspect-ratio: 150%;
    }

    .ratio-xs-3x4 {
        --bs-aspect-ratio: 133.3333333333%;
    }

    .ratio-xs-4x3 {
        --bs-aspect-ratio: 75%;
    }

    .ratio-xs-16x9 {
        --bs-aspect-ratio: 56.25%;
    }

    .ratio-xs-9x16 {
        --bs-aspect-ratio: 177.7777777778%;
    }

    .ratio-xs-21x9 {
        --bs-aspect-ratio: 42.8571428571%;
    }

    .ratio-xs-9x21 {
        --bs-aspect-ratio: 233.3333333333%;
    }

    .ratio-xs-9x32 {
        --bs-aspect-ratio: 355.5555555556%;
    }

    .ratio-xs-32x9 {
        --bs-aspect-ratio: 28.125%;
    }
}

/* Small */
@media (min-width: 576px) {
    .ratio-sm-1x1 {
        --bs-aspect-ratio: 100%;
    }

    .ratio-sm-1x2 {
        --bs-aspect-ratio: 200%;
    }

    .ratio-sm-2x1 {
        --bs-aspect-ratio: 50%;
    }

    .ratio-sm-1x3 {
        --bs-aspect-ratio: 300%;
    }

    .ratio-sm-3x1 {
        --bs-aspect-ratio: 33.3333333333%;
    }

    .ratio-sm-1x4 {
        --bs-aspect-ratio: 400%;
    }

    .ratio-sm-4x1 {
        --bs-aspect-ratio: 25%;
    }

    .ratio-sm-1x5 {
        --bs-aspect-ratio: 500%;
    }

    .ratio-sm-5x1 {
        --bs-aspect-ratio: 20%;
    }

    .ratio-sm-3x2 {
        --bs-aspect-ratio: 66.6666666667%;
    }

    .ratio-sm-2x3 {
        --bs-aspect-ratio: 150%;
    }

    .ratio-sm-3x4 {
        --bs-aspect-ratio: 133.3333333333%;
    }

    .ratio-sm-4x3 {
        --bs-aspect-ratio: 75%;
    }

    .ratio-sm-16x9 {
        --bs-aspect-ratio: 56.25%;
    }

    .ratio-sm-9x16 {
        --bs-aspect-ratio: 177.7777777778%;
    }

    .ratio-sm-21x9 {
        --bs-aspect-ratio: 42.8571428571%;
    }

    .ratio-sm-9x21 {
        --bs-aspect-ratio: 233.3333333333%;
    }

    .ratio-sm-9x32 {
        --bs-aspect-ratio: 355.5555555556%;
    }

    .ratio-sm-32x9 {
        --bs-aspect-ratio: 28.125%;
    }
}

/* Medium */
@media (min-width: 768px) {
    .ratio-md-1x1 {
        --bs-aspect-ratio: 100%;
    }

    .ratio-md-1x2 {
        --bs-aspect-ratio: 200%;
    }

    .ratio-md-2x1 {
        --bs-aspect-ratio: 50%;
    }

    .ratio-md-1x3 {
        --bs-aspect-ratio: 300%;
    }

    .ratio-md-3x1 {
        --bs-aspect-ratio: 33.3333333333%;
    }

    .ratio-md-1x4 {
        --bs-aspect-ratio: 400%;
    }

    .ratio-md-4x1 {
        --bs-aspect-ratio: 25%;
    }

    .ratio-md-1x5 {
        --bs-aspect-ratio: 500%;
    }

    .ratio-md-5x1 {
        --bs-aspect-ratio: 20%;
    }

    .ratio-md-3x2 {
        --bs-aspect-ratio: 66.6666666667%;
    }

    .ratio-md-2x3 {
        --bs-aspect-ratio: 150%;
    }

    .ratio-md-3x4 {
        --bs-aspect-ratio: 133.3333333333%;
    }

    .ratio-md-4x3 {
        --bs-aspect-ratio: 75%;
    }

    .ratio-md-16x9 {
        --bs-aspect-ratio: 56.25%;
    }

    .ratio-md-9x16 {
        --bs-aspect-ratio: 177.7777777778%;
    }

    .ratio-md-21x9 {
        --bs-aspect-ratio: 42.8571428571%;
    }

    .ratio-md-9x21 {
        --bs-aspect-ratio: 233.3333333333%;
    }

    .ratio-md-9x32 {
        --bs-aspect-ratio: 355.5555555556%;
    }

    .ratio-md-32x9 {
        --bs-aspect-ratio: 28.125%;
    }
}

/* Large */
@media (min-width: 992px) {
    .ratio-lg-1x1 {
        --bs-aspect-ratio: 100%;
    }

    .ratio-lg-1x2 {
        --bs-aspect-ratio: 200%;
    }

    .ratio-lg-2x1 {
        --bs-aspect-ratio: 50%;
    }

    .ratio-lg-1x3 {
        --bs-aspect-ratio: 300%;
    }

    .ratio-lg-3x1 {
        --bs-aspect-ratio: 33.3333333333%;
    }

    .ratio-lg-1x4 {
        --bs-aspect-ratio: 400%;
    }

    .ratio-lg-4x1 {
        --bs-aspect-ratio: 25%;
    }

    .ratio-lg-1x5 {
        --bs-aspect-ratio: 500%;
    }

    .ratio-lg-5x1 {
        --bs-aspect-ratio: 20%;
    }

    .ratio-lg-3x2 {
        --bs-aspect-ratio: 66.6666666667%;
    }

    .ratio-lg-2x3 {
        --bs-aspect-ratio: 150%;
    }

    .ratio-lg-3x4 {
        --bs-aspect-ratio: 133.3333333333%;
    }

    .ratio-lg-4x3 {
        --bs-aspect-ratio: 75%;
    }

    .ratio-lg-16x9 {
        --bs-aspect-ratio: 56.25%;
    }

    .ratio-lg-9x16 {
        --bs-aspect-ratio: 177.7777777778%;
    }

    .ratio-lg-21x9 {
        --bs-aspect-ratio: 42.8571428571%;
    }

    .ratio-lg-9x21 {
        --bs-aspect-ratio: 233.3333333333%;
    }

    .ratio-lg-9x32 {
        --bs-aspect-ratio: 355.5555555556%;
    }

    .ratio-lg-32x9 {
        --bs-aspect-ratio: 28.125%;
    }
}

/* Extra large */
@media (min-width: 1200px) {
    .ratio-xl-1x1 {
        --bs-aspect-ratio: 100%;
    }

    .ratio-xl-1x2 {
        --bs-aspect-ratio: 200%;
    }

    .ratio-xl-2x1 {
        --bs-aspect-ratio: 50%;
    }

    .ratio-xl-1x3 {
        --bs-aspect-ratio: 300%;
    }

    .ratio-xl-3x1 {
        --bs-aspect-ratio: 33.3333333333%;
    }

    .ratio-xl-1x4 {
        --bs-aspect-ratio: 400%;
    }

    .ratio-xl-4x1 {
        --bs-aspect-ratio: 25%;
    }

    .ratio-xl-1x5 {
        --bs-aspect-ratio: 500%;
    }

    .ratio-xl-5x1 {
        --bs-aspect-ratio: 20%;
    }

    .ratio-xl-3x2 {
        --bs-aspect-ratio: 66.6666666667%;
    }

    .ratio-xl-2x3 {
        --bs-aspect-ratio: 150%;
    }

    .ratio-xl-3x4 {
        --bs-aspect-ratio: 133.3333333333%;
    }

    .ratio-xl-4x3 {
        --bs-aspect-ratio: 75%;
    }

    .ratio-xl-16x9 {
        --bs-aspect-ratio: 56.25%;
    }

    .ratio-xl-9x16 {
        --bs-aspect-ratio: 177.7777777778%;
    }

    .ratio-xl-21x9 {
        --bs-aspect-ratio: 42.8571428571%;
    }

    .ratio-xl-9x21 {
        --bs-aspect-ratio: 233.3333333333%;
    }

    .ratio-xl-9x32 {
        --bs-aspect-ratio: 355.5555555556%;
    }

    .ratio-xl-32x9 {
        --bs-aspect-ratio: 28.125%;
    }
}

/* Extra extra large */
@media (min-width: 1400px) {
    .ratio-xxl-1x1 {
        --bs-aspect-ratio: 100%;
    }

    .ratio-xxl-1x2 {
        --bs-aspect-ratio: 200%;
    }

    .ratio-xxl-2x1 {
        --bs-aspect-ratio: 50%;
    }

    .ratio-xxl-1x3 {
        --bs-aspect-ratio: 300%;
    }

    .ratio-xxl-3x1 {
        --bs-aspect-ratio: 33.3333333333%;
    }

    .ratio-xxl-1x4 {
        --bs-aspect-ratio: 400%;
    }

    .ratio-xxl-4x1 {
        --bs-aspect-ratio: 25%;
    }

    .ratio-xxl-1x5 {
        --bs-aspect-ratio: 500%;
    }

    .ratio-xxl-5x1 {
        --bs-aspect-ratio: 20%;
    }

    .ratio-xxl-3x2 {
        --bs-aspect-ratio: 66.6666666667%;
    }

    .ratio-xxl-2x3 {
        --bs-aspect-ratio: 150%;
    }

    .ratio-xxl-3x4 {
        --bs-aspect-ratio: 133.3333333333%;
    }

    .ratio-xxl-4x3 {
        --bs-aspect-ratio: 75%;
    }

    .ratio-xxl-16x9 {
        --bs-aspect-ratio: 56.25%;
    }

    .ratio-xxl-9x16 {
        --bs-aspect-ratio: 177.7777777778%;
    }

    .ratio-xxl-21x9 {
        --bs-aspect-ratio: 42.8571428571%;
    }

    .ratio-xxl-9x21 {
        --bs-aspect-ratio: 233.3333333333%;
    }

    .ratio-xxl-9x32 {
        --bs-aspect-ratio: 355.5555555556%;
    }

    .ratio-xxl-32x9 {
        --bs-aspect-ratio: 28.125%;
    }
}