/* Estilos Gerais (Desktop) */
body {
    font-size: 16px;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    padding: 20px;
}

.navigation {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}

.games {
    display: flex;
    flex-wrap: wrap;
}

.games-item {
    width: calc(20% - 10px);
    margin: 5px;
}

#side_navigation_wrap {
    width: 200px;
    float: left;
}

/* Mobile (Tablets) */
@media (max-width: 768px) {
    .navigation {
        flex-direction: column;
        align-items: center;
    }

    .games-item {
        width: calc(50% - 10px);
        margin: 5px;
    }

    #side_navigation_wrap {
        display: none; /* Oculta a navegação lateral em telas menores */
    }
}

/* Mobile (Smartphones) */
@media (max-width: 480px) {
    .games-item {
        width: 100%;
        margin: 5px 0;
    }

    .navigation {
        flex-direction: column;
        padding: 5px 10px;
    }

    #menu ul {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    #menu ul li {
        margin: 5px 0;
    }

    h1, h2, h3, p {
        font-size: 4vw;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}