/* Module for image-only layout */
/* Container for the image gallery section */
.custom-bg {
    background-color: #fafafa; /* Light gray background */
    padding: 20px;             /* Space around the whole section */
    text-align: center;        /* Centers the images horizontally */
    display: flex;             /* Uses Flexbox for better alignment */
    flex-wrap: wrap;           /* Allows images to wrap to the next line */
    justify-content: center;   /* Centers items in the flex row */
    align-items: center;       /* Aligns items vertically */
}

/* Individual Images */
.custom-bg img {
    max-width: 100%;           /* Ensures image never exceeds screen width */
    height: auto;              /* Naturally preserves the aspect ratio */
    display: block;            /* Prevents weird bottom-margin gaps */
    margin: 15px;              /* Consistent spacing between images */
    border-radius: 4px;        /* Optional: gives a slight soft edge to photos */
    transition: transform 0.3s ease; /* Makes them feel interactive */
}

/* Subtle hover effect for better user experience */
.custom-bg img:hover {
    transform: scale(1.02);    /* Slight zoom when hovered */
}