#reserve {
    form {
        input {
            margin-bottom: 10px;
        }
    }
}

#events {
    ul {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0;
        padding: 0;
        gap: 10px;

        li {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin: 0;
            padding: 15px;
            border: 2px solid #ccc;
            border-radius: 10px;

            .event-title {
                display: block;
                text-decoration: none;
                color: var(--text-color);
                margin-top: 0;

                b {
                    font-size: 1.5rem;
                }
            }
            p {
                margin: 5px 0;
            }
            a {
                margin-top: auto;
            }
        }

        @media (max-width: 1000px) {
            grid-template-columns: 1fr;
        }
    }
}

#online-games {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            display: inline-block;
            margin: 0 10px 10px 0;
            transition: all 0.5s !important;

            &:hover {
                transform: translateY(-10px);

                a {
                    background-color: rgba(0, 0, 0, 0.75);
                }

                p {
                    opacity: 1;
                }
            }

            a {
                display: flex;
                flex-direction: column-reverse;
                width: 150px;
                height: 200px;
                padding: 10px;
                border-radius: 10px;
                color: white;
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                background-color: rgba(0, 0, 0, 0);
                background-blend-mode: darken;
                text-decoration: none;
                transition: all 0.5s !important;

                b {
                    display: block;
                    width: 100%;
                    margin-top: auto;
                    text-align: center;
                    font-size: var(--h5);
                    text-shadow: black 0 0 25px;
                }

                p {
                    text-align: center;
                    opacity: 0;
                    transition: all 0.5s !important;
                }
            }
        }
    }
}