* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
    grid-auto-rows: 350px; /* Normal height for the grid rows */
    gap: 10px; /* Space between images */
    width: 80%;
    margin: 0 auto; /* Center the grid horizontally */
    position: relative; /* Position relative to maintain the stacking context */
    z-index: 1; /* Ensure it stays above the blurred background */
    color: white; /* Add a white text color */
    font-family: "Courier New", Courier, monospace; /* Set the font */
    font-size: 25px; /* Set the font size */
    padding: 20px; /* Optional: add some padding */
}

/* General image styling */
.image-grid img {
    width: 100%; /* Force images to fill grid cells horizontally */
    max-width: 400px;
    height: 100%; /* Force images to fill grid cells vertically */
    object-fit: cover; /* Ensure images are scaled without distortion */
    border-radius: 5px; /* Optional: rounded corners */
    border: 5px solid white;
    transition: transform 0.5s ease, z-index 0.5s ease; /* Smooth transition for scaling */
    position: relative; /* So images can expand outside of the grid */
    z-index: 0; /* Default z-index */
}

/* Expand the image to 2x size on hover */
.image-grid img:hover {
    transform: scale(1.75); /* Scale the image by 2x */
    z-index: 10; /* Bring the hovered image above others */
}

/* Top center image (2nd image) - make it half the height */
.image-grid a:nth-child(2) {
    grid-row: span 0.5; /* Spans half the height of a row */
    grid-column: 2; /* Ensure it's in the center column */
    height: 175px; /* Make sure it fills its half-row */
}

/* Center column adjustments - 5th and 8th images aligned properly */
.image-grid a:nth-child(3n+5) {
    grid-column: 2; /* Keep these in the center column */
    grid-row: span 1; /* Keep them at the normal row height */
    margin-top: -175px; /* Offset the center column to create staggered effect */
}

img {
    border-radius: 1em;
    max-height: 350px;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .image-grid img:hover {
        transform: scale(1.2); /* Reduce scaling on smaller screens */
    }
}

.bgimg {
    /* Background image */
    padding-top: 1em;
    position: relative; /* Needed to place the grid above it */
    overflow: hidden; /* Ensure overflow is hidden */
}

.bgimg::before {
    content: "";
    /* Cover the entire container */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Set the background image */
    background-image: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%),
        url('images/background.jpg');
    /* Center the background image */
    background-position: center;
    /* Allow for vertical stretching */
    background-size: 100% auto; /* 100% width and automatic height */
    /* Allow the image to repeat vertically */
    background-repeat: repeat-y;
    /* Create a gradient effect for smooth transition */
    filter: blur(6px);
    z-index: -1;
}

.contributors {
    background-color: white;
    border-radius: 1em;
    padding: 10px 10px 10px 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 30px;
    font-family: "Courier New", Courier, monospace;
    font-size: 20px;
    text-align: center;
}

.contributorsinner {
    border: 2px solid darkgray;
    border-radius: 10px;
}

.contributors img {
    height: 20px;
    margin-top: -5px;
}