/* ==========================================================================
   Page Base Styling
   ========================================================================== */

@charset "UTF-8";

html, body {
    background-color: #FFFFFF;
    margin: 0;
    padding: 0;
}

.style1 {
    color: #000000;
    font-size: 10px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   Global Link Settings
   ========================================================================== */
a:link, 
a:visited, 
a:hover, 
a:active {
    text-decoration: none;
    color: #000000;
}

#op {
     opacity: 0.99;
     filter: alpha(opacity=99); /* Legacy support for older IE browsers */
}

/* ==========================================================================
   Layout Container
   ========================================================================== */
.page-container {
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 2%;
    padding-bottom: 5%;
    text-align: center;
}

/* ==========================================================================
   5-Column CSS Grid (Flows Left-to-Right, Row-by-Row)
   ========================================================================== */
.image-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Generates 5 equal columns permanently */
    column-gap: 12px;                      /* Horizontal space between your pictures */
    row-gap: 12px;                         /* Vertical space between your rows */
    margin-top: 25px;
    margin-bottom: 25px;
    width: 100%;
}

.grid-img {
    width: 100%;
    aspect-ratio: 2 / 3;                   /* Forces a vertical/portrait shape (Width to Height) */
    object-fit: cover;                     /* Zooms and crops landscape images so they don't stretch */
    object-position: center;               /* Keeps the center of the image focused during the crop */
    display: block;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
/* Tablets and small laptops (e.g., iPads, smaller screens) */
@media (max-width: 1024px) {
    .image-grid {
        grid-template-columns: repeat(3, 1fr); /* Drops to a clean 3-column layout */
    }
}

/* Large smartphones and phablets */
@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* Drops to 2 columns for smaller screens */
        column-gap: 10px;                      /* Slightly reduces the gap space */
        row-gap: 10px;
    }
    .page-container {
        width: 92%;                            /* Gives the layout a bit more room on small displays */
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .image-grid {
        grid-template-columns: repeat(1, 1fr); /* Single-column layout so photos are readable */
        row-gap: 15px;                         /* Shifts spacing entirely to vertical gaps */
    }
}