/* CONTAINER: Use Flexbox for Masonry-style column wrapping */
.custom-gallery-row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* COLUMN: The container for each stack of images */
.column {
    /* Base style for 4 columns (25% each) */
    flex: 25%; 
    max-width: 25%;
    padding: 0 4px;
    transition: all 0.3s ease; /* For smooth transition on button click */
}

/* IMAGES: Ensure images stack correctly and maintain aspect ratio */
.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%; /* Important: makes images responsive within the column */
    height: auto; /* Ensures aspect ratio is maintained */
    display: block; /* Removes any default spacing below the image */
}

/* Hide the unused default two-column rule */
/* .column {
  flex: 50%;
  padding: 0 4px;
} */