/* Delete the <style></style> tags if pasting into a CSS file */

<style>
/* Image sizing based on ratio */

/* Square */
.ratio-1-1 img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-width: 100%;
}

/* Landscape Orientation */
.ratio-2-1 img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    max-width: 100%;
}

.ratio-3-2 img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    max-width: 100%;
}

.ratio-4-3 img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    max-width: 100%;
}

.ratio-5-4 img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    max-width: 100%;
}

.ratio-16-9 img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    max-width: 100%;
}

.ratio-21-9 img {
    aspect-ratio: 21 / 9;
    object-fit: cover;
    max-width: 100%;
}

.ratio-1-91-1 img {
    aspect-ratio: 1.91 / 1; /* FB social share */
    object-fit: cover;
    max-width: 100%;
}

/* Portrait Orientation */
.ratio-1-2 img {
    aspect-ratio: 1 / 2;
    object-fit: cover;
    max-width: 100%;
}

.ratio-2-3 img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    max-width: 100%;
}

.ratio-3-4 img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    max-width: 100%;
}

.ratio-4-5 img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    max-width: 100%;
}

.ratio-9-16 img {
    aspect-ratio: 9 / 16;
    object-fit: cover;
    max-width: 100%;
}

.ratio-9-21 img {
    aspect-ratio: 9 / 21;
    object-fit: cover;
    max-width: 100%;
}
</style>