@import url("/styles/base/base.css");
@import url("/styles/layout/header.css");
@import url("/styles/layout/footer.css");
.parrafo-grander {
    font-size: 20px;
    font-weight: bold;
    margin: 50px auto;
    text-align: center;
}
/*sección de Home*/
.home-main {
    margin: 0 10px;
}

.social-media {
    display: flex;
    flex-direction: column;
}
/*Estilos para Updates*/
.main-updates {
    margin: 0 10px 100px 10px;
    max-width: 650px;
}
.cards-updates {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 20px;
    margin-top: 24px;
}
.card-post__updates {
    width: 290px;
    height: auto;
    border: 2px solid var(--blanco);
    border-radius: 10px;
}
.card-post__updates figure {
    width: 100%;
}
.card-post__updates figure img {
    width: 100%;
    border-radius: 10px;
}
.card-post__updates h3 {
    font-size: var(--texto-extra-pequeño);
    text-align: center;
    color: var(--blanco);
    margin: 20px 0;
}
.card-post__updates p {
    line-height: 1.6;
    margin-bottom: 16px;
}
/*Sección de juegos*/
.main-juegos {
    margin: 0 10px 100px 10px;
    max-width: 650px;
}
.cards-games {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 20px;
    margin: 20px 0;
}
.card-post__games {
    width: 290px;
    height: auto;
    border: 2px solid var(--blanco);
    border-radius: 10px;
}
.card-post__games figure {
    width: 100%;
}
.card-post__games figure img {
    width: 100%;
    border-radius: 10px;
}
.card-post__games h3 {
    font-size: var(--texto-extra-pequeño);
    text-align: center;
    color: var(--blanco);
    margin: 20px 0;
}
.card-post__games p {
    line-height: 1.6;
    margin-bottom: 16px;
}
/*Estios Para La sección de de social media*/
.social-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 50px 0;
    border: solid 2px var(--blanco);
    border-radius: 10px;
    padding: 8px;
}
.social-media h3 {
    font-size: var(--texto-extra-pequeño);
    color: var(--blanco);
    text-align: center;
    margin-bottom: 16px;
}
.social-media p {
    font-size: var(--texto-extra-pequeño);
    text-align: center;
    color: var(--blanco);
    margin: 0 0 16px 0;
}
.social-media a {
    margin: 4px;
}
/*Estilos del Footer*/

@media (min-width: 620px) and (max-width: 1024px) {
    .parrafo-grander {
        font-size: 28px;
        font-weight: bold;
        margin: 50px auto;
        text-align: center;
      }
    
    .home-main {
        margin: 0 auto;
        max-width: 600px;
    }
    .cards-games {
        gap: 10px;
        grid-template-columns: 1fr 1fr;
        margin-top: 24px;
    }
    .cards-updates {
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }
    
    .main-juegos {
        margin: 16px auto;
    }
    .main-updates {
        margin: 16px auto;
    }
    .social-media {
        margin-bottom: 100px;
    }
    .social-media h3 {
        font-size: var(--texto-pequeño);
    }
   
}
@media (min-width: 1024px) {
    .parrafo-grander {
        font-size: 32px;
        font-weight: bold;
        margin: 50px auto;
        text-align: center;
      }
    
    
    .home-main {
        margin: 0 auto 100px auto;
        max-width: 800px;
    }
    .main-juegos {
        margin: 0 auto 100px auto;
        max-width: 1000px;
    }
    .cards-games {
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        gap: 20px;
        margin: 30px 10px 80px 10px;
    }
    .cards-games a {
        text-decoration: none;
    }
    .card-post__games {
        display: grid;
        grid-template-columns: 250px 1fr;
        width: 980px;
        height: auto;
        border: 2px solid var(--blanco);
        border-radius: 10px;
    }
    .card-post__games figure {
        width: 250px;
        padding: 10px;
    }
    .card-post__games figure img {
        width: 100%;
        border-radius: 10px;
    }
    .card-post__games h3 {
        font-size: var(--texto-mediano);
        text-align: left;
        color: var(--blanco);
        margin: 20px 10px;
    }
    .card-post__games p {
        text-align: left;
        margin: 0 16px;
    }
    /*Estilos Updates*/
    .main-updates {
        margin: 0 auto 100px auto;
        max-width: 1000px;
    }
    .cards-updates {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        place-items: center;
        gap: 20px;
        margin: 30px 10px 80px 10px;
    }
    .card-post__updates {
        width: 290px;
        height: auto;
        border: 2px solid var(--blanco);
        border-radius: 10px;
    }
    .card-post__updates figure {
        width: 100%;
    }
    .card-post__updates figure img {
        width: 100%;
        border-radius: 10px;
    }
    .card-post__updates h3 {
        font-size: var(--texto-extra-pequeño);
        text-align: center;
        color: var(--blanco);
        margin: 20px 0;
    }
    .card-post__updates p {
        margin-bottom: 16px;
    }
    .social-media h3 {
        font-size: var(--texto-pequeño);
    }
    .social-media p {
        font-weight: bold;
    }
}