/* Basic styling for frontend display */
.b7-multiple-featured-images {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Increased gap for better spacing */
    margin-top: 15px;
    justify-content: flex-start; /* Default alignment */
}

.b7-multiple-featured-images img {
    border: 1px solid #eee;
    padding: 5px;
    box-sizing: border-box;
    height: auto; /* Keep height auto for aspect ratio */
}

/* Adjustments based on the number of images */

/* For 1 image - Make it larger and centered */
.b7-mfimg-count-1 {
    justify-content: center; /* Center if only one image */
}
.b7-mfimg-count-1 img {
    max-width: 50%; /* Make single image larger */
}


/* For 2 images - Display side by side, taking up more width */
.b7-mfimg-count-2 {
    justify-content: space-around; /* Distribute space evenly */
}
.b7-mfimg-count-2 img {
    max-width: 45%; /* Slightly smaller than half to allow space */
}


/* For 3 images - Display in a row, more compact */
.b7-mfimg-count-3 {
    justify-content: space-between; /* Distribute space evenly */
}
.b7-mfimg-count-3 img {
    max-width: 30%; /* Three images in a row */
}

/* Clearfix to prevent floating issues */
.b7-multiple-featured-images::after {
    content: "";
    display: block;
    clear: both;
}



/* Responsive adjustments - Example for smaller screens */
@media (max-width: 768px) {
    .b7-multiple-featured-images {
        flex-direction: column; /* Stack images on smaller screens */
        align-items: center; /* Center align stacked images */
    }
    .b7-multiple-featured-images img {
        max-width: 80%; /* Make images wider on small screens */
    }
    .b7-mfimg-count-1 img,
    .b7-mfimg-count-2 img,
    .b7-mfimg-count-3 img {
        max-width: 80%; /* Ensure all counts adjust on small screens */
    }