/* Menu mobile */

.navbar__mobile-btn {
    display: none;
}

.navbar__mobile-list {
    display: none;
}

@media (max-width: 1024px) {

    /* LAYOUT */
    .layout {
        width: 72%;
        min-width: 72rem;
        margin: 0 auto;
        /* modificamos el grid template-areas  */
        grid-template-areas:
            "header header"
            "nav nav"
            "marquee marquee"
            "slider slider"
            "high high"
            "videos videos"
            "carousel carousel"
            "main main"
            "aside aside"
    }

    /* HEADER */
    .layout__header {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    /* SECCION  CONTENIDO RECIENTE , MODIFICO PARA QUE QUEDE CENTRADO*/
    .recent__list-header {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .aside__recent {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        justify-content: center;
        align-items: center;
    }

    /* Ocultamos el menu normal por debajo de los 1024px */
    .navbar__list {
        display: none;
    }

    /* MENU MOBILE */

    /* Mostramos el boton cuando sea menos de 1024px y en los estilos de la navbar , le aplicamos los mismos que al boton search y su icono  */

    .navbar__mobile-btn {
        display: flex;
    }

    /* Mostramos ahora la lista que contiene el menu mobile y le damos estilos */

    .navbar__mobile-list {
        /* OCULTAMO EL MENU PARA LUEGO MOSTRARLO CUANDO CLICKEMOS EL BOTN DE HAMBURGUESA QUE SE MOSTRARA POR DEBALO DE LOS 1024px */
        display: none;
        position: absolute;
        padding: 1.5rem;
        top: 98%;
        width: 100%;
        background-color: var(--color-bg-navbar);
        z-index: 99;
    }

    .mobile-list__item {
        width: 100%;
        padding: 0.5rem 2rem;
        border-bottom: 1px solid var(--color-border-list);
    }

    .mobile-list__container {
        display: flex;
        flex-direction: row;
        /* justify-content: space-between; */
        /* align-items: center; */
    }

    .mobile-list__link {
        display: block;
        width: 85%;
        font-weight: 400;
        line-height: 3rem;
        font-size: 1.3rem;
        text-transform: uppercase;
        color: var(--color-principal);
    }

    .mobile-list__icon {
        cursor: pointer;
    }

    .mobile-list__icon .fa-solid {
        padding-left: 12rem;
        color: var(--color-secondary);
        font-size: 1.6rem;
        font-weight: bold;
    }

    /* SUBMENU MOBILE*/
    /* EL SUBMENU EN PRINCIPIO ESTA OCULTO SE MOSTRARA CON JS CUANDO CLICKEMOS LA FLECHITA */
    .mobile-list__msubmenu {
        display: none;
    }

    .msubmenu__item {
        padding-left: 4rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;

    }

    .msubmenu__link {
        font-weight: 400;
        font-size: 1.3rem;
        line-height: 3rem;
        color: var(--color-principal);
        text-transform: uppercase;
    }

    /* SLIDER */
    
    .layout__slider {
        grid-area: slider;
        width: 100%;
        margin-bottom: 3rem;
        display: grid;
        grid-template-areas: "slider1 slider3 slider3 slider3"
            "slider2 slider3 slider3 slider3"
            "slider4 slider4 slider5 slider5";

    }

    .slider__container--slider1 {
        width: 100%;
        height: 17rem;
    }

    .slider__container--slider2 {
        width: 100%;
        height: 17rem;
    }

    .slider__container--slider3 {
        width: 100%;
        height: 34rem;
    }

    .slider__container--slider5 {
        width: 100%;
        height: 23.5rem;

    }

    /* HIGHLIGHTS / MEJORES MOMENTOS */

    .layout__carousel-games {
        background-color: transparent;
        padding: 0.5rem;

    }

    .highlights__posts {
        width: 100%;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .highlights__post {
        display: flex;
        gap: 1rem;

    }

    .highlights__img {
        transition: all 300ms ease-in-out;

    }

    .highlights__subheader {
        display: flex;
        justify-content: center;
    }

    .highlights__img {
        display: flex;
        flex-direction: column;

    }

    /* VIDEOS */
    .videos__main-video {
        width: 75%;
    }

    /* CAROUSEL VIDEOS */

    .carousel-games__item-hidden {
        display: none;
    }

    .carousel-games__item {
        flex-basis: 50%;

    }

    .main__news {
        width: 100%;
    }

    /* ASIDE / BARRA LATERAL */

    .layout__aside {
        margin-bottom: 3rem;
    }

    .recent__container {
        width: 100%;
    }

    /* FOOTER */

    .footer__container {
        width: 70%;
        min-width: 70rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .footer__title {
        text-align: center;
    }

    .footer__fslider {
        width: auto;
        height: auto;
    }

}

@media (max-width: 750px) {
    .layout {
        width: 57%;
        min-width: 57rem;
        margin: 0 auto;

    }

    /* SLIDER */
    .layout__slider {
        grid-area: slider;
        width: 100%;
        margin-bottom: 3rem;
        display: grid;
        grid-template-areas: "slider1 slider3 slider3 slider3"
            "slider2 slider3 slider3 slider3"
            "slider4 slider4 slider5 slider5";

    }
    
    .slider__container--slider1 {
        width: 100%;
        height: 12.8rem;
    }

    .slider__container--slider2 {
        width: 100%;
        height: 11.8rem;
    }

    .slider__container--slider3 {
        width: 100%;
        height: 25rem;
    }
    
    .slider__container--slider5 {
        width: 100%;
        height: 19.25rem;

    }

    .layout__main {
        padding: 3rem;
        margin-right: 0;
    }

    /* FOOTER */

    .footer__container {
        width: 52%;
        min-width: 52rem;
        flex-direction: column;
        margin-left: 10rem;
    }

    .about__description {
        margin-right: 5rem;
    }

    .footer__right-container {
        margin-right: 0rem;
    }
    
    .footer__description {
        margin: 1rem;
    }
    
    .footer__text {
        width: 100%;
        margin-left: 2rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 592px) {
    .layout {
        width: 37%;
        min-width: 37rem;
        margin: 0 auto;
    }

    /* SLIDER */

    .layout__slider {
        grid-area: slider;
        width: 100%;
        margin-bottom: 3rem;
        display: grid;
        grid-template-areas: "slider1 slider1 slider1 slider1"
            "slider2 slider2 slider2 slider2"
            "slider3 slider3 slider3 slider3"
            "slider4 slider4 slider4 slider4";
        column-gap: 0;
        grid-template-columns: 100%;

    }

    .slider__container--slider1 {
        width: 100%;
        height: auto;
    }

    .slider__container--slider2 {
        width: 100%;
        height: auto;
    }

    .slider__container--slider3 {
        width: 100%;
        height: auto;
    }

    .slider__container--slider5 {
        width: 100%;
        height: auto;

    }

    /* MEJORES MOMENTOS */
    
    .highlights__img {
        display: flex;
        flex-direction: column;

    }

    /* VIDEOS */

    .videos__container {
        flex-direction: column;
        gap: 0;
    }

    .videos__subheader {
        text-align: center;
    }

    .main-video__yt-video {
        width: 35rem;
        height: 20rem;
    }

    .videos__list {
        flex-direction: column;
    }

    .videos__video {
        width: 100%;

    }

    /* Noticias */
    .news__subheader {
        text-align: center;
    }

    .news__main-post {
        flex-direction: column;

    }

    .news__list {
        flex-direction: column;

    }

    .news__detail {
        width: 55%;
    }

    /* JUEGOS */
    .games__subheader {
        text-align: center;
    }

    /* ULTIMOS ARTICULOS /JUEGOS */

    .posts__list-header {
        margin-left: 3rem;
    }

    .posts__container {
        flex-direction: column;
    }

    .carousel-games__list {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .carousel-games__img {
        width: 100%;
    }

    .layout__footer {
        /* Mantén el ancho del footer al 100% */
        width: 100%;
        max-width: none;
    }
    
    .footer__container {
        width: 100vw ;
        /* Forzar el ancho a 100% del viewport */
        max-width: 592px ;
        /* Asegúrate de que no exceda 350px */
        min-width: 0 ;
        /* Cambia a 0 para permitir que se reduzca */
        margin: 0 auto;
        /* Centra el contenedor */
        padding: 1rem;
        /* Ajusta el padding si es necesario */
        display: flex;
        /* Mantén el display flex si es necesario */
        gap: 1rem;
        /* Ajusta el espacio entre elementos */
    }

    .footer__text {
        width: 100%;
        margin: 0 auto;
        font-size: 0.8rem;
    }

    .footer__author {
        font-weight: 600;
    }

    .news__post {
        max-width: 59rem;
    }
}

@media (max-width: 350px) {
    .layout__footer {
        /* Mantén el ancho del footer al 100% */
        width: 100%;
        max-width: none;
    }

    .footer__container {
        width: 100%;
        /* Forzar el ancho a 100%  */
        max-width: 350px;
        /* Asegúrate de que no exceda 350px */
        min-width: 0;
        /* Cambia a 0 para permitir que se reduzca */
        margin: 0 auto;
        /* Centra el contenedor */
        padding: 1rem;
        /* Ajusta el padding si es necesario */
        display: flex;
        /* Mantén el display flex si es necesario */
        gap: 1rem;
        /* Ajusta el espacio entre elementos */
    }

    .footer__author {
        font-weight: 600;
    }

    .news__post {
        max-width: 35rem;
    }
}