html, body {
    background-color: tan;
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Flexible grid columns */
    grid-template-rows: repeat(3, auto); /* 3 rows, auto height */
    gap: 20px; /* Space between grid items */
    padding: 5%;
    flex: 1; /* Ensures the container takes up full height */
}

.wrapper {
    position: relative; /* Required for positioning the overlay */
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}

.wrapper img {
    display: block; /* Ensures no extra space below images */
    width: auto; /* Maintain aspect ratio */
    transition: transform 0.3s ease; /* Optional hover effect */
    position: relative; /* Positioning for the overlay */
}

.wrapper:hover img {
    transform: scale(1.02); /* Optional zoom effect */
    opacity: 0.7; /* Slightly reduce opacity */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for both effects */
}

.pitchball {
    transform: scale(0.9);
}

.wrapper:hover .pitchball {
    filter: brightness(80%);
}

/* Overlay title styling */
.image-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Covers the entire image */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0); /* Transparent background */
    font-family: 'Tholoes', sans-serif; /* Fallback to sans-serif */
    color: lightcyan;
    font-size: 0em;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in effect */
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.wrapper:hover .image-title {
    opacity: 1; /* Show the title on hover */
}

.image-subtitle {
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    font-family: 'Space Mono', monospace;
    color: red;
    font-size: 0.8em;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    /* Typed reveal effect */
    clip-path: inset(0 100% 0 0); /* Hide all text initially */
    opacity: 1; /* Always visible for typing effect */
    transition:
        clip-path 0.5s cubic-bezier(.77,0,.18,1);
}

.wrapper:hover .image-subtitle {
    clip-path: inset(0 0 0 0); /* Reveal all text */
}

.wrapper:not(:hover) .image-subtitle {
    clip-path: inset(0 100% 0 0); /* Hide all text */
    transition-duration: 0.2s; /* Quick hide */
}

/* Mobile */
@media screen and (max-width: 1023px) {
    .container {
        grid-template-columns: 1fr; /* Single column layout for mobile */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center-align items horizontally */
        gap: 100px; /* Add space between rows */
    }

    .container .wrapper.image2 {
        margin-bottom: -30px; /* Adjust gap below this specific row */
    }
    
    .wrapper {
        width: 80%;
        margin: 0 auto; /* Center the wrapper horizontally */
        text-align: center; /* Align text and content to the center */
    }

    .wrapper img {
        max-height: 500px; /* Ensures uniform image height */
    }

    .wrapper:hover .image-title {
        font-size: 5em;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Auto-fit columns */
        grid-template-rows: repeat(3, auto); /* 3 rows, auto height */
        gap: 60px; /* Space between grid items */
    }

    .image1 {
        grid-column: 1; /* Place image 1 in the first column */
        grid-row: 1;
    }

    .image2 {
        grid-column: 3; /* Place image 2 in the third column */
        grid-row: 1;
    }

    .image3 {
        grid-column: 5; /* Place image 3 in the fifth column */
        grid-row: 1;
    }

    .image4 {
        grid-column: 1; /* Place image 4 in the second column */
        grid-row: 2;
    }

    .image5 {
        grid-column: 3; /* Place image 5 in the fourth column */
        grid-row: 2;
    }

    .image6 {
        grid-column: 5; /* Place image 5 in the fourth column */
        grid-row: 2;
    }

    .wrapper img {
        max-height: 250px; /* Ensures uniform image height */
    }
    
    .wrapper:hover .image-title {
        font-size: 4em;
    }
}