/* Grid container */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
    padding: 2vw;
}

/* Individual image card */
.image-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2; /* Maintain the aspect ratio */
    display: block;
    text-decoration: none;
}

/* Image styling */
.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(80%); /* Make the image a bit dulled */
}

/* Image title styling */
.image-title {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: #fff;
    padding: 0.7vh 0.7vw;
    border-radius: 0.7vw;
    font-size: min(1.5vw,1rem);
    white-space: nowrap; /* Prevent title text wrapping */
}

/* Display WIDTH: < 800px */

@media only screen and (max-width:800px){
    .image-grid{
        margin-left: 5vw;
        gap: 5vw;
        grid-template-columns: 40vw 40vw;
    }
}


/* Display WIDTH: < 500px */

@media only screen and (max-width:500px){
    .image-grid{
        margin-left: 8vw;
        grid-template-columns: 80vw;
    }
    .image-title{
        font-size: min(2.5vw,1rem);
    }
}