/*
 Copyright (c) 2025 HawkFlit. All rights reserved.
 Unauthorized copying of this file, via any medium is strictly prohibited.
 Proprietary and confidential
*/
.home-gallery-container {
    display: grid;
    grid-template-columns: 1.5fr 0.5fr 1fr 1fr 0.5fr 1.5fr; /* Matches 6 columns in total */
    grid-template-rows: repeat(3, auto); /* Rows adjust dynamically based on content */
    gap: 1.25rem; /* Gap between grid items */
    grid-template-areas:
        "firstImage firstImage secondImage secondImage thirdImage thirdImage"
        "fourthImage fifthImage fifthImage fifthImage fifthImage sixthImage"
        "seventhImage seventhImage eightImage eightImage ninthImage ninthImage";
}

@media only screen and (max-width: 50rem) {
    .home-gallery-container {
        grid-template-columns: 1fr 0.5fr 1fr; 
        grid-template-rows: repeat(5, 1fr);
        grid-template-areas: 
            "firstImage secondImage secondImage"
            "thirdImage thirdImage fourthImage"
            "fifthImage fifthImage fifthImage"
            "sixthImage seventhImage seventhImage"
            "eightImage eightImage ninthImage"; 
    }
}

.img-wrapper {
    position: relative; /* Position the wrapper relative to ensure hover text is correctly aligned */
    cursor: pointer;
    overflow: hidden; /* Prevent elements from overflowing */
    display: block; /* Ensure the anchor behaves like a block element */
    text-decoration: none; /* Remove underline from links */
}

.img-wrapper img {
    border-radius: 10px;
    transition: filter 0.5s ease, visibility 0.5s ease;
    width: 100%;
    height: clamp(5.985rem, calc(1.53rem + 25.373vw), 15.5rem); /* Responsive height */
    aspect-ratio: 4 / 3;
    object-fit: cover; /* Ensures images cover the available space */
}

.hover-text {
    font-family: "Inter", sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: clamp(0.75rem, 2vw, 2rem);
    letter-spacing: 0.375rem;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1; /* Ensure hover text is above the image */
    pointer-events: none; /* Prevent hover text from interfering with anchor clicks */
}

.img-wrapper:hover img {
    filter: brightness(0.2); /* Dim the image on hover */
}

.img-wrapper:hover .hover-text {
    visibility: visible; /* Show hover text */
    opacity: 1; /* Fade in the hover text */
}

/* Grid area assignment for each image */
.img-1-wrapper {
    grid-area: firstImage;
}
.img-2-wrapper {
    grid-area: secondImage;
}
.img-3-wrapper {
    grid-area: thirdImage;
}
.img-4-wrapper {
    grid-area: fourthImage;
}
.img-5-wrapper {
    grid-area: fifthImage;
}
.img-6-wrapper {
    grid-area: sixthImage;
}
.img-7-wrapper {
    grid-area: seventhImage;
}
.img-8-wrapper {
    grid-area: eightImage;
}
.img-9-wrapper {
    grid-area: ninthImage;
}