.ratio {
    align-items: flex-start;
}

.ratio:before {
    display: none;
}

.ratio > *:not([data-bg]) {
    position: relative;
}

.ratio > * {
    width: unset;
    height: unset;
}

/* ratios */
.ratio-1x1 {
    aspect-ratio: auto 1 / 1;
}

.ratio-16x9 {
    aspect-ratio: auto 16 / 9;
}

.ratio-9x16 {
    aspect-ratio: auto 9 / 16;
}

.ratio-16x10 {
    aspect-ratio: auto 16 / 10;
}

.ratio-10x16 {
    aspect-ratio: auto 10 / 16;
}

.ratio-2x1 {
    aspect-ratio: auto 2 / 1;
}

.ratio-1x2 {
    aspect-ratio: auto 1 / 2;
}

.ratio-3x1 {
    aspect-ratio: auto 3 / 1;
}

.ratio-1x3 {
    aspect-ratio: auto 1 / 3;
}

.ratio-3x2 {
    aspect-ratio: auto 3 / 2;
}

.ratio-2x3 {
    aspect-ratio: auto 2 / 3;
}

.ratio-4x3 {
    aspect-ratio: auto 4 / 3;
}

.ratio-3x4 {
    aspect-ratio: auto 3 / 4;
}

.ratio-5x4 {
    aspect-ratio: auto 5 / 4;
}

.ratio-4x5 {
    aspect-ratio: auto 4 / 5;
}

@media (min-width: 576px) {
    .ratio-sm-1x1 {
        aspect-ratio: auto 1 / 1;
    }

    .ratio-sm-16x9 {
        aspect-ratio: auto 16 / 9;
    }

    .ratio-sm-9x16 {
        aspect-ratio: auto 9 / 16;
    }

    .ratio-sm-16x10 {
        aspect-ratio: auto 16 / 10;
    }

    .ratio-sm-10x16 {
        aspect-ratio: auto 10 / 16;
    }

    .ratio-sm-2x1 {
        aspect-ratio: auto 2 / 1;
    }

    .ratio-sm-1x2 {
        aspect-ratio: auto 1 / 2;
    }

    .ratio-sm-3x1 {
        aspect-ratio: auto 3 / 1;
    }

    .ratio-sm-1x3 {
        aspect-ratio: auto 1 / 3;
    }

    .ratio-sm-3x2 {
        aspect-ratio: auto 3 / 2;
    }

    .ratio-sm-2x3 {
        aspect-ratio: auto 2 / 3;
    }

    .ratio-sm-4x3 {
        aspect-ratio: auto 4 / 3;
    }

    .ratio-sm-3x4 {
        aspect-ratio: auto 3 / 4;
    }

    .ratio-sm-5x4 {
        aspect-ratio: auto 5 / 4;
    }

    .ratio-sm-4x5 {
        aspect-ratio: auto 4 / 5;
    }
}

@media (min-width: 768px) {
    .ratio-md-1x1 {
        aspect-ratio: auto 1 / 1;
    }

    .ratio-md-16x9 {
        aspect-ratio: auto 16 / 9;
    }

    .ratio-md-9x16 {
        aspect-ratio: auto 9 / 16;
    }

    .ratio-md-16x10 {
        aspect-ratio: auto 16 / 10;
    }

    .ratio-md-10x16 {
        aspect-ratio: auto 10 / 16;
    }

    .ratio-md-2x1 {
        aspect-ratio: auto 2 / 1;
    }

    .ratio-md-1x2 {
        aspect-ratio: auto 1 / 2;
    }

    .ratio-md-3x1 {
        aspect-ratio: auto 3 / 1;
    }

    .ratio-md-1x3 {
        aspect-ratio: auto 1 / 3;
    }

    .ratio-md-3x2 {
        aspect-ratio: auto 3 / 2;
    }

    .ratio-md-2x3 {
        aspect-ratio: auto 2 / 3;
    }

    .ratio-md-4x3 {
        aspect-ratio: auto 4 / 3;
    }

    .ratio-md-3x4 {
        aspect-ratio: auto 3 / 4;
    }

    .ratio-md-5x4 {
        aspect-ratio: auto 5 / 4;
    }

    .ratio-md-4x5 {
        aspect-ratio: auto 4 / 5;
    }
}

@media (min-width: 1024px) {
    .ratio-lg-1x1 {
        aspect-ratio: auto 1 / 1;
    }

    .ratio-lg-16x9 {
        aspect-ratio: auto 16 / 9;
    }

    .ratio-lg-9x16 {
        aspect-ratio: auto 9 / 16;
    }

    .ratio-lg-16x10 {
        aspect-ratio: auto 16 / 10;
    }

    .ratio-lg-10x16 {
        aspect-ratio: auto 10 / 16;
    }

    .ratio-lg-2x1 {
        aspect-ratio: auto 2 / 1;
    }

    .ratio-lg-1x2 {
        aspect-ratio: auto 1 / 2;
    }

    .ratio-lg-3x1 {
        aspect-ratio: auto 3 / 1;
    }

    .ratio-lg-1x3 {
        aspect-ratio: auto 1 / 3;
    }

    .ratio-lg-3x2 {
        aspect-ratio: auto 3 / 2;
    }

    .ratio-lg-2x3 {
        aspect-ratio: auto 2 / 3;
    }

    .ratio-lg-4x3 {
        aspect-ratio: auto 4 / 3;
    }

    .ratio-lg-3x4 {
        aspect-ratio: auto 3 / 4;
    }

    .ratio-lg-5x4 {
        aspect-ratio: auto 5 / 4;
    }

    .ratio-lg-4x5 {
        aspect-ratio: auto 4 / 5;
    }
}

@media (min-width: 1280px) {
    .ratio-xl-1x1 {
        aspect-ratio: auto 1 / 1;
    }

    .ratio-xl-16x9 {
        aspect-ratio: auto 16 / 9;
    }

    .ratio-xl-9x16 {
        aspect-ratio: auto 9 / 16;
    }

    .ratio-xl-16x10 {
        aspect-ratio: auto 16 / 10;
    }

    .ratio-xl-10x16 {
        aspect-ratio: auto 10 / 16;
    }

    .ratio-xl-2x1 {
        aspect-ratio: auto 2 / 1;
    }

    .ratio-xl-1x2 {
        aspect-ratio: auto 1 / 2;
    }

    .ratio-xl-3x1 {
        aspect-ratio: auto 3 / 1;
    }

    .ratio-xl-1x3 {
        aspect-ratio: auto 1 / 3;
    }

    .ratio-xl-3x2 {
        aspect-ratio: auto 3 / 2;
    }

    .ratio-xl-2x3 {
        aspect-ratio: auto 2 / 3;
    }

    .ratio-xl-4x3 {
        aspect-ratio: auto 4 / 3;
    }

    .ratio-xl-3x4 {
        aspect-ratio: auto 3 / 4;
    }

    .ratio-xl-5x4 {
        aspect-ratio: auto 5 / 4;
    }

    .ratio-xl-4x5 {
        aspect-ratio: auto 4 / 5;
    }
}

@media (min-width: 1440px) {
    .ratio-xxl-1x1 {
        aspect-ratio: auto 1 / 1;
    }

    .ratio-xxl-16x9 {
        aspect-ratio: auto 16 / 9;
    }

    .ratio-xxl-9x16 {
        aspect-ratio: auto 9 / 16;
    }

    .ratio-xxl-16x10 {
        aspect-ratio: auto 16 / 10;
    }

    .ratio-xxl-10x16 {
        aspect-ratio: auto 10 / 16;
    }

    .ratio-xxl-2x1 {
        aspect-ratio: auto 2 / 1;
    }

    .ratio-xxl-1x2 {
        aspect-ratio: auto 1 / 2;
    }

    .ratio-xxl-3x1 {
        aspect-ratio: auto 3 / 1;
    }

    .ratio-xxl-1x3 {
        aspect-ratio: auto 1 / 3;
    }

    .ratio-xxl-3x2 {
        aspect-ratio: auto 3 / 2;
    }

    .ratio-xxl-2x3 {
        aspect-ratio: auto 2 / 3;
    }

    .ratio-xxl-4x3 {
        aspect-ratio: auto 4 / 3;
    }

    .ratio-xxl-3x4 {
        aspect-ratio: auto 3 / 4;
    }

    .ratio-xxl-5x4 {
        aspect-ratio: auto 5 / 4;
    }

    .ratio-xxl-4x5 {
        aspect-ratio: auto 4 / 5;
    }
}

/* ratios - media */
.media .ratio-1x1 {
    aspect-ratio: 1 / 1;
}

.media .ratio-16x9 {
    aspect-ratio: 16 / 9;
}

.media .ratio-9x16 {
    aspect-ratio: 9 / 16;
}

.media .ratio-16x10 {
    aspect-ratio: 16 / 10;
}

.media .ratio-10x16 {
    aspect-ratio: 10 / 16;
}

.media .ratio-2x1 {
    aspect-ratio: 2 / 1;
}

.media .ratio-1x2 {
    aspect-ratio: 1 / 2;
}

.media .ratio-3x1 {
    aspect-ratio: 3 / 1;
}

.media .ratio-1x3 {
    aspect-ratio: 1 / 3;
}

.media .ratio-3x2 {
    aspect-ratio: 3 / 2;
}

.media .ratio-2x3 {
    aspect-ratio: 2 / 3;
}

.media .ratio-4x3 {
    aspect-ratio: 4 / 3;
}

.media .ratio-3x4 {
    aspect-ratio: 3 / 4;
}

.media .ratio-5x4 {
    aspect-ratio: 5 / 4;
}

.media .ratio-4x5 {
    aspect-ratio: 4 / 5;
}

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

    .media .ratio-sm-16x9 {
        aspect-ratio: 16 / 9;
    }

    .media .ratio-sm-9x16 {
        aspect-ratio: 9 / 16;
    }

    .media .ratio-sm-16x10 {
        aspect-ratio: 16 / 10;
    }

    .media .ratio-sm-10x16 {
        aspect-ratio: 10 / 16;
    }

    .media .ratio-sm-2x1 {
        aspect-ratio: 2 / 1;
    }

    .media .ratio-sm-1x2 {
        aspect-ratio: 1 / 2;
    }

    .media .ratio-sm-3x1 {
        aspect-ratio: 3 / 1;
    }

    .media .ratio-sm-1x3 {
        aspect-ratio: 1 / 3;
    }

    .media .ratio-sm-3x2 {
        aspect-ratio: 3 / 2;
    }

    .media .ratio-sm-2x3 {
        aspect-ratio: 2 / 3;
    }

    .media .ratio-sm-4x3 {
        aspect-ratio: 4 / 3;
    }

    .media .ratio-sm-3x4 {
        aspect-ratio: 3 / 4;
    }

    .media .ratio-sm-5x4 {
        aspect-ratio: 5 / 4;
    }

    .media .ratio-sm-4x5 {
        aspect-ratio: 4 / 5;
    }
}

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

    .media .ratio-md-16x9 {
        aspect-ratio: 16 / 9;
    }

    .media .ratio-md-9x16 {
        aspect-ratio: 9 / 16;
    }

    .media .ratio-md-16x10 {
        aspect-ratio: 16 / 10;
    }

    .media .ratio-md-10x16 {
        aspect-ratio: 10 / 16;
    }

    .media .ratio-md-2x1 {
        aspect-ratio: 2 / 1;
    }

    .media .ratio-md-1x2 {
        aspect-ratio: 1 / 2;
    }

    .media .ratio-md-3x1 {
        aspect-ratio: 3 / 1;
    }

    .media .ratio-md-1x3 {
        aspect-ratio: 1 / 3;
    }

    .media .ratio-md-3x2 {
        aspect-ratio: 3 / 2;
    }

    .media .ratio-md-2x3 {
        aspect-ratio: 2 / 3;
    }

    .media .ratio-md-4x3 {
        aspect-ratio: 4 / 3;
    }

    .media .ratio-md-3x4 {
        aspect-ratio: 3 / 4;
    }

    .media .ratio-md-5x4 {
        aspect-ratio: 5 / 4;
    }

    .media .ratio-md-4x5 {
        aspect-ratio: 4 / 5;
    }
}

@media (min-width: 1024px) {
    .media .ratio-lg-1x1 {
        aspect-ratio: 1 / 1;
    }

    .media .ratio-lg-16x9 {
        aspect-ratio: 16 / 9;
    }

    .media .ratio-lg-9x16 {
        aspect-ratio: 9 / 16;
    }

    .media .ratio-lg-16x10 {
        aspect-ratio: 16 / 10;
    }

    .media .ratio-lg-10x16 {
        aspect-ratio: 10 / 16;
    }

    .media .ratio-lg-2x1 {
        aspect-ratio: 2 / 1;
    }

    .media .ratio-lg-1x2 {
        aspect-ratio: 1 / 2;
    }

    .media .ratio-lg-3x1 {
        aspect-ratio: 3 / 1;
    }

    .media .ratio-lg-1x3 {
        aspect-ratio: 1 / 3;
    }

    .media .ratio-lg-3x2 {
        aspect-ratio: 3 / 2;
    }

    .media .ratio-lg-2x3 {
        aspect-ratio: 2 / 3;
    }

    .media .ratio-lg-4x3 {
        aspect-ratio: 4 / 3;
    }

    .media .ratio-lg-3x4 {
        aspect-ratio: 3 / 4;
    }

    .media .ratio-lg-5x4 {
        aspect-ratio: 5 / 4;
    }

    .media .ratio-lg-4x5 {
        aspect-ratio: 4 / 5;
    }
}

@media (min-width: 1280px) {
    .media .ratio-xl-1x1 {
        aspect-ratio: 1 / 1;
    }

    .media .ratio-xl-16x9 {
        aspect-ratio: 16 / 9;
    }

    .media .ratio-xl-9x16 {
        aspect-ratio: 9 / 16;
    }

    .media .ratio-xl-16x10 {
        aspect-ratio: 16 / 10;
    }

    .media .ratio-xl-10x16 {
        aspect-ratio: 10 / 16;
    }

    .media .ratio-xl-2x1 {
        aspect-ratio: 2 / 1;
    }

    .media .ratio-xl-1x2 {
        aspect-ratio: 1 / 2;
    }

    .media .ratio-xl-3x1 {
        aspect-ratio: 3 / 1;
    }

    .media .ratio-xl-1x3 {
        aspect-ratio: 1 / 3;
    }

    .media .ratio-xl-3x2 {
        aspect-ratio: 3 / 2;
    }

    .media .ratio-xl-2x3 {
        aspect-ratio: 2 / 3;
    }

    .media .ratio-xl-4x3 {
        aspect-ratio: 4 / 3;
    }

    .media .ratio-xl-3x4 {
        aspect-ratio: 3 / 4;
    }

    .media .ratio-xl-5x4 {
        aspect-ratio: 5 / 4;
    }

    .media .ratio-xl-4x5 {
        aspect-ratio: 4 / 5;
    }
}

@media (min-width: 1440px) {
    .media .ratio-xxl-1x1 {
        aspect-ratio: 1 / 1;
    }

    .media .ratio-xxl-16x9 {
        aspect-ratio: 16 / 9;
    }

    .media .ratio-xxl-9x16 {
        aspect-ratio: 9 / 16;
    }

    .media .ratio-xxl-16x10 {
        aspect-ratio: 16 / 10;
    }

    .media .ratio-xxl-10x16 {
        aspect-ratio: 10 / 16;
    }

    .media .ratio-xxl-2x1 {
        aspect-ratio: 2 / 1;
    }

    .media .ratio-xxl-1x2 {
        aspect-ratio: 1 / 2;
    }

    .media .ratio-xxl-3x1 {
        aspect-ratio: 3 / 1;
    }

    .media .ratio-xxl-1x3 {
        aspect-ratio: 1 / 3;
    }

    .media .ratio-xxl-3x2 {
        aspect-ratio: 3 / 2;
    }

    .media .ratio-xxl-2x3 {
        aspect-ratio: 2 / 3;
    }

    .media .ratio-xxl-4x3 {
        aspect-ratio: 4 / 3;
    }

    .media .ratio-xxl-3x4 {
        aspect-ratio: 3 / 4;
    }

    .media .ratio-xxl-5x4 {
        aspect-ratio: 5 / 4;
    }

    .media .ratio-xxl-4x5 {
        aspect-ratio: 4 / 5;
    }
}