.grid-container {
            display: grid;
            gap: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            max-width: 100%;
            margin: 0 auto;
        }

        /* --- Individual Section Styling --- */
        .section-item {
            position: relative;
            overflow: hidden; /* Hides the parts of the image that zoom beyond the border */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease-in-out;
        }

        .section-item:hover {
            /* The translateY transform has been removed from this rule */
        }

        /*
          NEW: This creates a semi-transparent gray overlay using a pseudo-element.
          It covers the entire section item.
        */
        .section-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(60, 60, 60, 0.4); /* Semi-transparent gray */
            pointer-events: none; /* Allows clicks to pass through to the image */
            z-index: 10; /* Ensures the overlay is on top of the image */
            transition: background-color 0.5s ease-in-out; /* Smooth transition for the color change */
        }

        /*
          NEW: When the user hovers over the section, this rule removes the gray overlay.
        */
        .section-item:hover::before {
            background-color: rgba(60, 60, 60, 0); /* Makes the overlay fully transparent */
        }

.section-item {
    width: 15em;
    height: 8em;
}

        /* --- Image Styling and Zoom Effect --- */
        .section-item img {
            display: block;
            width: 100%;
            height: 8em; /* Fixed height for consistency */
            object-fit: cover; /* Ensures image covers the space without distortion */
            transition: transform 0.5s ease-in-out; /* Smooth transition for the zoom */
        }

        .section-item:hover img {
            transform: scale(1.1); /* Zooms the image in by 10% on hover */
        }

        /* --- Title Text Styling and Enlarge Effect --- */
        .title-container {
            position: absolute; /* Positions the text over the image */
            top: 50%; /* Puts the top edge of the container in the middle */
            left: 0;
            width: 100%;
            padding: 0 1.5rem;
            transform: translateY(-50%); /* Moves the container up by half its height for perfect vertical centering */
            text-align: left;
            pointer-events: none; /* Allows hover events to pass through to the image */
        }

        .title-container h3 {
            color: #fff;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Adds shadow for readability */
            margin: 0;
            font-size: 1em;
            line-height: 1.2;
            font-weight: bold;
            transition: transform 0.5s ease-in-out; /* Smooth transition for the text size */
        }

        .section-item:hover h3 {
            transform: scale(1.05); /* Slightly enlarges the text on hover */
        }


a {
    color: white;
    cursor: pointer;
    text-decoration: none;
}