/* 1. Container holding the vertical column */
.gallery-column {
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: center;    /* Centers items horizontally in the column */
    gap: 40px;             /* Spacing between each image card */
    width: 100%;
    max-width: 400px;      /* Caps the layout width for better readability */
    margin: 0 auto;        /* Centers the entire column on the page */
}

/* 2. Wrapper card for each image and its text */
.gallery-item {
    display: flex;
    flex-direction: column; /* Forces text below the image */
    align-items: center;    /* Centers both the image and text internally */
    width: 100%;
}

/* 3. Image responsiveness and aspect ratio preservation */
.gallery-item img {
    max-width: 100%;       /* Prevents image from overflowing the container */
    height: auto;          /* Main interest: preserves native aspect ratio */
    display: block;        /* Removes inline whitespace issues */
    border-radius: 8px;    /* Optional styling */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Optional styling */
}

/* 4. Single line text constraint */
.gallery-item .caption {
    font-style: italic;
    margin-top: 12px;
    font-size: 16px;
    color: #333;
    /* text-align: center; */

    /* Ensures text stays strict to one line */
    width: 100%;
    /* white-space: nowrap;   /* Disallows text wrapping */
    overflow: hidden;      /* Hides overflow text */
    text-overflow: ellipsis; /* Appends "..." if text is too long */
}

/* 5. metadata */
.gallery-item .meta {
    margin-top: 12px;
    font-size: 16px;
    color: #333;
    /* text-align: center; */

    /* Ensures text stays strict to one line */
    width: 100%;
    /* white-space: nowrap;   /* Disallows text wrapping */
    overflow: hidden;      /* Hides overflow text */
    text-overflow: ellipsis; /* Appends "..." if text is too long */
}