.image {
    width: 100%;
    object-fit: cover;
}

.img--3x4 {
    aspect-ratio: var(--aspect-3-4);
}

.img--4x5 {
    aspect-ratio: var(--aspect-4-5);
}

.img--5x3 {
    aspect-ratio: var(--aspect-5-3);
}

.img--5x4 {
    aspect-ratio: var(--aspect-5-4);
}

.img--9x16 {
    aspect-ratio: var(--aspect-9-16);
}

.img--16x9 {
    aspect-ratio: var(--aspect-16-9);
}

.focus-top-left {
    object-position: top left;
}

.focus-top-center {
    object-position: top center;
}

.focus-top-right {
    object-position: top right;
}

.focus-center-left {
    object-position: center left;
}

.focus-center-center {
    object-position: center center;
}

.focus-center-right {
    object-position: center right;
}

.focus-bottom-left {
    object-position: bottom left;
}

.focus-bottom-center {
    object-position: bottom center;
}

.focus-bottom-right {
    object-position: bottom right;
}

@media (max-width: 1024px) {
    .tablet--focus-top-left {
        object-position: top left;
    }

    .tablet--focus-top-center {
        object-position: top center;
    }

    .tablet--focus-top-right {
        object-position: top right;
    }

    .tablet--focus-center-left {
        object-position: center left;
    }

    .tablet--focus-center-center {
        object-position: center center;
    }

    .tablet--focus-center-right {
        object-position: center right;
    }

    .tablet--focus-bottom-left {
        object-position: bottom left;
    }

    .tablet--focus-bottom-center {
        object-position: bottom center;
    }

    .tablet--focus-bottom-right {
        object-position: bottom right;
    }
}

@media (max-width: 767px) {
    .mobile--focus-top-left {
        object-position: top left;
    }

    .mobile--focus-top-center {
        object-position: top center;
    }

    .mobile--focus-top-right {
        object-position: top right;
    }

    .mobile--focus-center-left {
        object-position: center left;
    }

    .mobile--focus-center-center {
        object-position: center center;
    }

    .mobile--focus-center-right {
        object-position: center right;
    }

    .mobile--focus-bottom-left {
        object-position: bottom left;
    }

    .mobile--focus-bottom-center {
        object-position: bottom center;
    }

    .mobile--focus-bottom-right {
        object-position: bottom right;
    }
}