.grid-container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr); /* Ensures two columns with equal width */
    grid-auto-flow: dense; /* Helps in filling empty spaces in the grid */
    max-width: 100%;
    margin: 1rem 0 1rem 0;
}

.grid-container a {
    text-decoration: none;
    color: inherit;
}

/* Ensures the last item spans the entire width if it's the only one in the last row */
.grid-container :last-child:nth-last-child(odd) {
    grid-column: 1 / -1;
}

/* Responsive layout for smaller screens */
@media screen and (max-width: 1000px) {
    .grid-container {
        grid-template-columns: 1 / -1; /* Single column on smaller screens */
    }
}

.box {
    box-sizing: border-box;
    padding: 0.1rem 0.4rem 0.3rem 0.4rem;
    border: 3px solid #ccc;
    margin: 0;
    border-radius: 15px;
    background-color: #000000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.box h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensure the h1 takes full height of the box */
    text-align: center;
    margin: 0;
    font-family: 'Alegreya', serif !important;
    font-size: xx-large !important;
    color: #000000;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75% !important; /* Ensure the h1 takes full height of the box */
    text-align: center;
    margin: 0;
    font-family: 'Alegreya', serif !important;
    font-size: xx-large !important;
    color: #000000 !important;
}

.box h2, .box p {
    margin: 0.25rem;
    padding: 0;
    line-height: normal !important;
    font-family: 'Alegreya', serif !important;
}

.box h2 {
    font-size: x-large !important;
}

.box:hover {
    border-color: #c3b086;
    transition: border-color 0.3s;
    cursor: pointer;
}

body {
    background-color: #c0bda6}