/**
 * nnfocalpoint - Frontend CSS
 * Basic styles for focal point images
 */

/* Base styles for focal point images */
.nnfp-image {
    width: 100%;
    height: 100%;
    display: block;
}

/* Container for focal point images */
.nnfp-container {
    position: relative;
    overflow: hidden;
}

.nnfp-container .nnfp-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Aspect ratio containers */
.nnfp-container--16-9 {
    aspect-ratio: 16 / 9;
}

.nnfp-container--4-3 {
    aspect-ratio: 4 / 3;
}

.nnfp-container--1-1 {
    aspect-ratio: 1 / 1;
}

.nnfp-container--3-2 {
    aspect-ratio: 3 / 2;
}

.nnfp-container--21-9 {
    aspect-ratio: 21 / 9;
}

/* Background image containers */
.nnfp-bg {
    background-size: cover;
    background-repeat: no-repeat;
}