html::before {
    background: url('img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
    filter: brightness(90%) blur(1px);
}

nav {
    height: 8vh;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 256px);
    padding: calc(64 / 1080 * 100vh) calc(20 / 1920 * 100vw);
}

.grid-container {
    grid-template-columns: repeat(4, 1fr); /* 4 columns in total */
    column-gap: calc(40 / 1920 * 100vw);
    row-gap: calc(40 / 1080 * 100vh);
    margin-bottom: calc(20 / 1920 * 100vw); /* Space between the rows */
    padding: calc(32 / 1080 * 100vh) calc(32 / 1920 * 100vw);
    width: 79%;
}

/* First row styles */
main .grid-item:first-child { grid-column: span 2; } /* First image spans two columns */
main .grid-item:nth-child(2), .grid-item:nth-child(3) { grid-column: span 1; } /* Second and third images span one column */

/* Second row styles */
main .grid-item:nth-child(4) { grid-column: span 1; }
main .grid-item:nth-child(6) { 
    grid-column: span 2; 
    margin-top: calc(-98 / 1080 * 100vh);
}

/* Style the Image Used to Trigger the Modal */
.grid-item {
    padding: 0;
    overflow: visible;
}

nav .grid-item {
    width: 100%;
}

nav .grid-item img {
    width: 100%;
}

.grid-item:hover {
    transform: scale(1.05); /* Scale up button on hover */
}