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

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

.grid-container {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    padding: calc(32 / 1080 * 100vh) calc(32 / 1920 * 100vw); /* Padding around the grid */
}

/* Style the Image Used to Trigger the Modal */
.grid-item {
    width: 90%;
    padding: 0;
}

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

.grid-item img {
    width: 90%; /* Ensure image covers button width */
}

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

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

footer {
    bottom: 0px;
}