/* Basic responsive image support */
.has-focal-point {
    max-width: 100%;
    height: auto;
}

/* For images used as background */
.has-focal-point.background-image {
    background-size: cover;
    background-repeat: no-repeat;
}

/* For images using object-fit */
.has-focal-point.object-fit {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Helper classes for common aspect ratios */
.aspect-16-9 {
    position: relative;
    padding-bottom: 56.25%;
}

.aspect-4-3 {
    position: relative;
    padding-bottom: 75%;
}

.aspect-1-1 {
    position: relative;
    padding-bottom: 100%;
}

.aspect-16-9 .has-focal-point,
.aspect-4-3 .has-focal-point,
.aspect-1-1 .has-focal-point {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}