/* VARIABLES */
:root{
    --color-principal: #ffff;
    --color-secondary: #329153;
    --color-bg-navar: #333946;
    --color-border-list: rgba(255,255,255,03);
    --color-hover-sublist-item: rgba(0,0,0,0.05);
    --color-bg-marquee:#EEEEEE;
    --color-text-marquee:#7c7c7c ;
    --colot-titles:#333333;
    --color-bg-aside:#F5F5F5;
    --color-tweeter:#2FC2EF;
    --color-facebook:#4C66A4;
    --color-instagram:#EA4C89;
    --color-youtube:#CC181E;
    --color-linkedin:#F4A62A;

}

/* ESTILOS GENERALES */

html {
    font-size:10px;
}


body {
    width: 100%;
    height:100%;
    font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.6rem;
    background-color: var(--color-principal);
}

/* .fa-solid{
    margin-right: 0.5rem; 
    font-size: 1.2rem;
 } */

.decoration-bar{
    width: 100%;
    background-color: var(--color-secondary);
    height: 2.5rem;
}

.layout{
    display: grid;
    grid-template-areas: 
        "header header"
        "nav nav"
        "marquee marquee"
        "slider slider"
        "hig hig"
        "videos videos"
        "carousel carousel"
        "main aside";
    grid-template-columns: 70% 30%;

    width: 55vw;
    min-width: 100rem;
    margin :0 auto;

}

/* Estilos header cabecera */
.layout_header{
    grid-area: header;
    width: 100%;
    min-width:100%;
    padding: 2rem 0;
}

.header__img{
    width: 17rem;
}

/* Estilos navegacion NAV*/
.layout__nav{
    grid-area: nav;
    position: relative;
    width:100%;
}

.nav__navbar{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items:center;
    position: relative;
    min-height:5rem;
    max-height:5rem;
    width: 100%;
    color:var(--color-principal);
    background-color:  var(--color-bg-navar)  ;
    
}

.navbar__list{
    display:flex;
    flex-direction: row;
    align-items:center;
}

.navbar__item{
    height:5rem
}

.navbar__link{
    font-weight: 700;
    font-size: 1.3rem;
    padding: 1.5rem  1.5rem;
    color: var(--color-principal)
}

.navbar__search{
    display:flex;
    height:100%;
}


.search__input{
    display: block;
    width:0;
    height:5rem;
    font-size: 1.8rem;
    background-color: var(--color-secondary);
    color:var(--color-principal);   
    outline:none;
    border:none;    
    transition:all 500ms ease-out;
}

.search__input--visible {
    display: block;
    width: 200px;
    background-color: rebeccapurple;
    transition:all 500ms ease-out;
  }

.search__input::placeholder{
    color: var(--color-principal);
    padding: 0 0.5rem;
    opacity:1
}

.navbar__btn-search,
.navbar__mobile-btn{
    background-color: var(--color-secondary);
    padding: 0.8rem  1.3rem;
    height: 5rem;
    display:flex;
    align-items:center;
}

.navbar__btn-search .fa-solid{
    cursor:pointer;
    color: var(--color-principal);
    font-size: 2.7rem;
}


.navbar_btn-search{
    color: var(--color-principal);
}

.navbar__item:hover{
    background-color: var(--color-secondary)
}

/* Estilos submenus */

.navbar__item:hover .navbar__submenu{
   opacity: 1;
   visibility: visible;
   transition: all 300ms ease-in-out;
}

.navbar__item:hover .submenu__carrousel{
    display: block;
}

.navbar__submenu{
    opacity:0;
    visibility: hidden;
    z-index:9;
    overflow: hidden;
    position: absolute;
    top:100%;
    left:0;
    width: 100%;
    background-color: var(--color-secondary);
    display:flex;
    flex-direction: row;
}

.navbar__submenu--small{
    left: auto;
    width: 20%;
    overflow: visible;
}

.navbar__submenu--small > .navbar__sublist {
    width: 100%;
}

.navbar__sublist{
    display: inline-block;
    padding: 1rem;
    width: 25%;
}

.sublist__item{
    padding: 0.1rem 0;
    position: relative;
    border-bottom: 1px solid var(--color-border-list);
}

.sublist__item:last-child{
    border: none;
}

.sublist__item:hover{
    background-color: var(--color-hover-sublist-item);
}

.sublist__item:hover .sublist__dropdown{
    background-color: var(--color-principal);
    visibility: visible;
    opacity: 1;
    transition: all 300ms ease-in-out;
}

.sublist__link{
    color:var(--color-principal);
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    font-style: normal;
    text-transform: uppercase;
    white-space: nowrap;
}

.sublist__dropdown{
    position: absolute;
    left: 100%;
    top:0 ;
    padding: 1rem;
    width: 21rem;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    background-color: var(--color-principal);
    box-shadow: 2px 0px 2px -1px rgba(0,0,0,0.10);
}

.dropdown__item{
    border-bottom: 1px solid var(--color-hover-sublist-item);
}

.dropdown__item:hover{
    background-color: var(--color-hover-sublist-item);
}

.dropdown__item:last-child{
    border: none;
}

.dropdown__link{
    color: var(--color-bg-navar);
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
}

/* Estilos carouseles */
.carousel__menu{
    display: flex;
    flex-direction: row;
}

.carousel__item{
    width: 25%;
    position: relative;
}

.carousel__menu--small > .carousel__item{
    flex-basis: auto;
}

.carousel__container-img{
    width: calc(100% + 35rem);
    height: 35rem;
    overflow: hidden;
}

.carousel__img{
    height: 100%;
    width: auto;
}

.carousel__container-raiting{
    position: absolute;
    bottom: 2rem;
    left:50%;
    width: 4.8rem;
    height: 4.8rem;
    transform: translateX(-50%);
}
.carousel__link{
    color:var(--color-principal);
    font-size: 1.7rem;
    text-shadow: 1px 1px 3px black;
    transition: all 3ms;
    background-color: var(--color-hover-sublist-item);
}
.carousel__tittle:hover > .carousel__link{
    background-color:var(--color-secondary)
}

.container-raiting__circle,.rating__circle,.circle_border{
    width:100%;
    height: 100%;
    border-radius: 3.2rem;
    background-color: var(--color-secondary);
    padding: 0.2rem;
}

.container-raiting__border
,.rating__border
,.circle_border{
    width: 100%;
    height: 100%;
    border-radius: 3.2rem;
    border: 2px solid var(--color-principal);
    display: flex;
    justify-content: center;
    align-items: center;

}

.container-raiting__mark
,.rating__mark
,.circle_mark{
    font-weight: 700;
    color: var(--color-principal);
}

.carousel__detail{
    position: absolute;
    top:1.5rem;
    left: 0;
    right: 0;
    padding: 1rem; 
    text-align: center;
}

/* Estilos marquesina */
.layout_marquee{
    grid-area: marquee;
    width: 100% ;
    height: 3.5rem;
    min-height: 3.5rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    margin-bottom: 3rem;
    background-color:var(--color-bg-marquee);    
}

.marquee_container{
    display: flex;
    overflow: hidden;
}

.marquee_header{
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--color-principal);
    background-color: var(--color-secondary);
    text-transform: uppercase;
    white-space:nowrap;
    padding: 0.5rem;
    margin-right: 1rem;
    position: relative;
    z-index: 5;
}

.marquee__list{
    /* margin-left: 12rem; */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10rem;
}

.marquee__item:first-child{
    margin-left: 10rem;
}

.marquee__title{
    font-size: 1.4rem;
    font-weight: 700;
    font-style: normal;
    white-space: nowrap;
}

.marquee__link{
    color:var(--color-bg-navar)
}

.marquee__link::before{
    content: "+ ";
    color: var(--color-secondary);
}

.marquee__link:hover{
    text-decoration: underline;
}

/* Estilos slider */
.layout__slider{

  grid-area:slider;  
  width: 100%;
  margin-bottom: 3rem;
  display: grid;
  row-gap: 0.5rem;  
  column-gap: 0.5rem;
  grid-template-areas: "slider1 slider3 slider3 slider4"
                       "slider2 slider3 slider3 slider5";
}

.slider__container{
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.slider__img{
    width: 100%;
    transition:all 300ms ease-in-out;
}

.slider__info{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color:var(--color-principal)
}

.slider__line{
    width: 4rem;
    height: 0.2rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    background-color: var(--color-secondary);
}



.slider__link-title{
    font-size: 1.5rem;
    text-shadow: 1px 1px 3px var(--color-bg-navar);
    color: var(--color-principal);
    text-transform: uppercase;
}

.fslider__category{
    font-weight: 400;
    font-size: 1.2rem;
    text-shadow: 1px 1px 3px var(--color-bg-navar) ;
}

.slider__container:hover .slider__img{
    transform: scale(1.1);
}

.slider__container--slider1{
    grid-area: slider1;
}

.slider__container--slider2{
    grid-area: slider2;
}

.slider__container--slider3{
    grid-area: slider3;
}

.slider__container--slider4{
    grid-area: slider4;
}

.slider__container--slider5{
    grid-area: slider5;
}

.slider__rating{
    position: absolute;
    top: 0;
    right: 0;
    width: 4rem;
    height: 4rem;
}

/* Estilos hig */
.layout__higlights{
    grid-area:hig;  
    width: 100%;
    margin-bottom: 3rem;
  }

/*Estilos sub encabezasos  */
.news__subheader,
.games__subheader,
.posts_subheader,
.login__subheader,
.recent__subheader,
.last-reviews__subheader,
.videos__subheader,
.highlights__subheader,
.posts_subheader
{
    width: 100%;
    height: 3.5rem;
    margin-bottom: 3rem;
    background-color: var(--color-bg-navar);
    padding: 0.5rem;

}

.subheader__title,
.list-header__title,
.last-reviews__link-title
.last-reviews__title{
    display: inline;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--color-principal);
    padding: 0.5rem;
    text-transform: uppercase;
    background-color: var(--color-secondary);
    white-space: nowrap;
}

.higlights__posts,
.posts__container{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 3rem;
    
}

.highlights__post,
.posts__post{
    height: 100%;
}


.posts__container{
    flex-wrap: wrap;
}
.posts__post{
    position: relative;
    flex-basis: 45%;
   
}

.highlights__image,
.post_container-image{
    position: relative;
    overflow: hidden;
}

.highlights__img,
.post__img{
    transition: all 300ms ease;
}

.highlights__img:hover,
.post__img:hover{
    transform: scale(1.1);
}

.hightlights__category,
.game__category,
.post__container-category{
    position: absolute;
    left: 0;
    bottom: 1rem;
    padding: 1rem;
    text-align: center;
    background-color: var(--color-secondary);
    transition: all 300ms ease;
}

.hightlights__name-category
.game__category,
.post_category{
    font-weight: 400;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--color-principal);
}

.highlights__author,
.main-video__autor,
.main-video__autor,
.main-post__author,
.news__author,
.post__author,
.recent__author{
    font-weight: 500;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.recent__author{
    width: 70%;
}

.hightlights__category:hover,
.game__category:hover,
.post__container-category:hover{
    background-color: var(--color-bg-navar);
}



.highligts__title,
.post__title{
    font-size: 1.9rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    margin-top:1rem;
}

.highlights__link,
.post__link{
    color:var(--colot-titles);
    transition: all 300ms ease;
}

.highligts__title:hover .highlights__link,
.post__title:hover .post__link{
    color:var(--color-secondary)

}

.highlights__meta,
.post__meta{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 1rem 0;
}



.highlihts_date,
.main-video__date,
.main-video__date,
.main-post__date,
.news_date,
.post__date{
    font-weight: 400;
    color: var(--color-secondary);
    font-size: 1.1rem;
    line-height: 1.5;
    text-transform: uppercase;
}

.highlights__description,
.post__description{
    color: var(--colot-titles);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.highlights__footer-post,
.post__footer-post,
.recent__meta-info{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}


.footer-post__container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-basis: 20%;
    gap: 1rem;
}

.post-footer-post__container{
    display: flex;
    flex-direction: row;
    margin-bottom: 2rem;
    gap: 1rem;
    width: 75%;
}


.footer-post__views, 
.footer-post__comments,
.main-video__views,
.main-video__comments,
.main-post__views,
.recent__views,
.recent__comments{
    display: flex;
    flex-direction: row;
    gap:0.4rem;
    font-weight: 400;
    font-size: 1.1rem;
    columns: var(--color-text-marquee);
}

.recent__views .fa-eye,
.recent__comments .fa-comment{
    font-weight: 600;
    font-size: 1rem;
    margin-left: 1rem;
}

.main-post__number-views{
    font-size: 1.1rem;
}

.footer-post__read-more,
.post__read-more{
    border: 1px solid var(--color-text-marquee);
    font-weight: 500;
    font-size: 1.1rem;
    padding: 0.4rem;
    text-transform: capitalize;
    margin-bottom: 2rem;
}

.footer-post__read-more:hover,
.post__read-more:hover{
    border: 1px solid var(--color-secondary);
    color:var(--color-secondary)
}



/* Estilos videos */
.layout__videos{
    grid-area:videos;
    width: 100%;
}

.videos__container{
    display: flex;
    flex-direction: row;
    gap: 3rem;
    /* margin-top: 3rem; */
}

.videos__main{
    flex-basis: 65%;
    padding-bottom: 3rem;
}

.main_yt-video{
    width: 100%;
    height: 40rem;
    margin-bottom: 2rem;
}

.main_yt-video > iframe{
    width: 100%;
    height: 100%;
    margin-bottom: 2rem;
}

.main-video__detail{
    font-size: 2.4rem;
    margin-bottom: 1rem;
}

.main-video__info{
    display: flex;
    align-items: row;
    justify-content: space-between;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-bg-marquee);
}

.video__image{
    overflow: hidden;
}

.video_img{
    transition: all 300ms ease;
}

.main-video__info-container{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.video__image:hover .video_img{
    transform: scale(1.1);
}

.videos__list{
    flex-basis: 35% ;
}

.video__detail{
    flex-basis: 75%;
}

.videos__title{
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}


.videos__link{
    color: var(--colot-titles);
    transition: all 300ms ease ;
}

.videos__title:hover > .videos__link{
    color: var(--color-secondary)
}

.video__info{
   display: flex; 
   gap: 1rem;
}

.videos__item{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-bg-marquee);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.main-video__comments > a{
    display: inline;
}


/* Estilos carousel */
.layout__carousel-games{
    margin-top: 5rem;
    grid-area: carousel;
    width: 100%;
    padding: 3rem;
    margin-bottom: 6rem;
    background-color: var(--color-bg-navar);

}

.carousel-games__list{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0.2rem;
}

.carousel-games__item{
    position: relative;
    overflow: hidden;
}

.carousel-games__image{
    width: 100%;
}

.carousel-games__img{
    width: 100%;
}

.carousel-games__rating{
    position:absolute;
    top: 1rem;
    right: 1rem;
    width: 4rem;    
    height: 4rem;
}


.carousel-games__info{
    position:absolute;
    top: 40%;
    text-align: center;
    padding: 0 1rem;
    transition: all 300ms ease;
}

.carousel-games__category{
    font-weight: 500;
    font-size: 1.1rem;
    text-shadow: 1px 1px 3px var(--colot-titles);
    color: var(--color-principal);
    transition: all 300ms ease;
}

.carousel-games__category:hover{
    color: var(--color-secondary);
}

.carousel-games__line{
    height: 0.2rem;
    width: 4rem;
    margin: .04rem auto;
    background-color: var(--color-secondary)
}

.carousel-games__link{
    font-size: 1.8rem;
    text-shadow: 1px 1px 3px var(--colot-titles);
    color: var(--color-principal);
    transition: all 300ms ease;
}


.carousel-games__link:hover{
    color: var(--color-secondary);
}


/* Estilos contenido principal main */
.layout__main{
    grid-area:main;
    margin-right: 3rem;
}

/* Estilos para las noticias */
.main_news{
    width: 100%;
}

.news__main-post{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 3rem;
    padding-bottom: 2rem;
    margin-bottom: 2rek ;
    border-bottom: 1px solid var(--color-text-marquee);
}

.main-post__image{
    position: relative;
    overflow: hidden;
    flex-basis: 50%;
    height: 20rem;
    background-color: red;
}

.main-post__info{
    flex-basis: 50%;  
}

.main-post__title{
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.main-post__link-title{
    color:var(--colot-titles);
    transition: all 300ms ease-in-out;
}

.main-post__footer-info{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.main-post__img{
    width: 100%;
    height: 100%;
    transition:  all 300ms ease-out;
}

.main-post__img:hover{
    transform: scale(1.1);
}

.main-post__container-category{
    position: absolute;
    left: 0;
    bottom: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--color-secondary);
}

.main-post__container-category:hover{
    background-color: var(--color-bg-navar);
}

.main-post__title:hover .main-post__link-title{
    color:var(--color-secondary)
}

.main-post__category{
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-principal);
}

.main-post__meta{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.main-post__description{
    font-size: 1.3rem;
    color: var(--colot-titles);
    margin-bottom: 1rem;
}

.main-post__read-more{
    border: 1px solid var(--color-text-marquee);
    font-weight: 500;
    font-size: 1.1rem;
    padding: 0.4rem;
    text-transform: capitalize;
    margin-bottom: 2rem;
}

.main-post__read-more:hover{
    border: 1px solid var(--color-secondary);
    color:var(--color-secondary)
}

.news_list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4rem   ;
    margin-top: 2rem;
    margin-bottom: 6rem;
}

.news__post{
    display: flex;
    flex-direction: row;
    width: 47%;
    gap: 1rem;
}

.footer-info__container{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.news__image{
    overflow: hidden;
    width: 7.5rem;
    height: 7.5rem;
}

.news__link-image{
    width: 100%;
    height: 100%;
    transition: all 300ms ease-in-out;
}

.news__link-image:hover{
    transform: scale(1.1);
}

.news__detail{
    width: 75%;
}

.news__title{
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.news__link__title{
    color: var(--colot-titles);
    transition: all 300ms ease-in-out;
}

.news__link__title:hover{
    color: var(--color-secondary);
}

.news__data{
    justify-content: left;
    grid-area: 1rem;
}

/* Seccion juegos */
.main_games{
    width: 100%;
    margin-bottom: 3rem;
}

.games__container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem   ;
}

.games__game{
    position: relative;
    flex-basis: calc(50% - 2rem);
}

.game__container-image{
    width: 100%;
    overflow: hidden;
}

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

}
.game__link-image:hover{

    transform: scale(1.1);
}

.game__rating{
    width: 4rem;;
    height: 4rem;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 9;
}


.game__details{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 1rem;
    padding-right: 5rem;
    background-color: rgba(0,0,0,0.2);
}

.game__title{
    font-size: 2rem;
    text-transform:uppercase;

}

.game__link-title:hover {
    text-shadow: 0 0 5px black;
}

.game__link-title{
    color: var(--color-principal);
    transition: 300ms all ease;
}

/* Ultimos articulos */
.main__posts{
    width: 100%;
    margin-bottom: 3rem;
    gap: 0.5rem;
}

.posts_list-header,
.recent__list-header{
    display: flex;
    flex-direction: row;
}

.list-header--small{
    color: var(--color-principal);
    margin-left: 5px;
}

/* barra lateral aside */
.layout__aside {
    grid-area:aside;
    background-color: var(--color-bg-aside);
    padding: 1.5rem;
    height: fit-content;
}

.login__container{
    width: 100%;
}

.form__container-username,
.form__container-remember,
.form__container-username{
    width: 100%;
    margin: 1rem 0;
}


.form__imput{
    width: 100%;
    border: 1px solid rgba(0,0,0,0.10);
    padding: 0.5rem;
}

.form_label{
    font-weight: 500;

}

.form__container-remember .form__imput {
    width: auto;
    display: inline
}

.form__container-remember .form_label {
    width: auto;
    display: inline
}

.form_submit{
    width: 100%;
    height: 3.7rem;
    background-color: var(--color-secondary);
    color: var( --color-principal);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 0.3rem;
    padding: 0.7rem;
    font-size: 1.3rem;
    text-align: center;
    font-weight: 400;
    margin-bottom: 1rem;
}

.login__regi,
.login__lost-pass{
    display: block;
    color: var(--color-secondary);
    font-weight: 500;
}

.aside__social{
    display: flex;
    flex-direction: row;
    color: var( --color-principal);
}

.social__list {
    width: 100%;
}

.social__item{
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem 2rem;
    color: var(--color-principal);
    transition: all 300ms ease;
   
}

.social__item--blue{
    background-color: var(--color-tweeter);
}
.social__item--yellow{
    background-color: var(--color-linkedin);
}
.social__item--bluedark{
    background-color: var(--color-facebook);
}
.social__item--pink{
    background-color: var(--color-youtube);
}
.social__item--red{
    background-color: var(--color-instagram);
}

.social__item:hover{
    padding-left: 3rem;
}

.social__link{
    width: 100%;
    display: flex;
    flex-direction: row;
    color: var(--color-principal);
}

.social__icon{
    margin-right: 1rem;
}

.fa-brands{
    font-size:3.2rem;
}

.social__number{
    font-size:1.8rem;
    line-height: 1;
}

.social__word{
    font-size:1.3rem;
    line-height: 1;
    opacity: 0.75;
}

.social__icon > .fa-brands{
    font-size: 3.6rem;
   margin-right: 1.5rem;
}

.aside__tweets{
    background-color: var(--color-tweeter);
    color: var(--color-principal);
    font-size: 1.3rem;
    padding: 1.3rem;
}

.tweets__header{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 3rem;
}

.tweets__header .fa-brands{
    margin-right: 1rem;
}

.tweets__content{
    margin-bottom: 3rem;
}

.last-reviews__title{
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: uppercase;
    display: inline-block;
}

.aside__recent{
    margin-bottom: 3rem;
    
}

.aside__recent .recent__subheader{
    /* background-color: blue; */
    padding: 0;
    /* overflow: hidden; */
}


.aside__recent  .recent__list-header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 1rem;
    width: 100%;
    padding: 0;

}

.aside__recent .list-header__item{
    /* height: 100%; */
    background-color: var(--color-secondary);
    text-align: center;
    padding: 0.1rem;
   
}


.aside__recent .list-header__title{
    display: block;
    padding: 0.1rem;
    font-size: 1.2rem ;
}

.recent__list-post{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.recent__container-img{
    width: 7rem;
    height: 7rem;
    overflow: hidden;
}

.recent__img{
    width: 100%;
    transition: all 300ms ease-in-out;
}

.recent__img:hover{
    transform: scale(1.1);
}

.recent__item{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.recent__title{
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.recent__link-title{
    color:var(--color-bg-navar);
    transition: all 300ms ease-in-out;
}

.recent__link-title:hover{
    color:var(--color-secondary)
}

.recent__container-info{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.recent__detail{
    width: 100%;
}

.aside__last-reviews{
    width: 100%;
    margin-bottom: 3rem ;
}

.last-reviews__subheader{
    display: flex;
}

.posts_read-more{
    width: 100%;
    text-align: center;
    font-weight: 300;
    border: 1px solid var(--color-bg-navar);
    text-transform: uppercase;
    padding: 0.4rem;
}

/* estilos footer */
.layout__footer{
    width: 100%;
    background-color: var(--color-bg-navar);
    color: var(--color-principal);
}

.footer__container{
    width: 55%;
    min-width: 100rem;
    margin: 0 auto;
    padding: 3rem 0;
    display: flex;
    flex-direction: row;
    gap: 3rem;
}

.footer__left-container{
    width: 33%;
}
.footer__center-container{
    width: 33%;
}
.footer__right-container{
    width: 33%;
}

.footer__about{
    width: 100%;
    margin-bottom: 3rem;
}

.about__title,
.tags__title,
.footer__title{
    margin-bottom: 2rem;
    color: var(--color-secondaryç);
    font-weight: 700;
    font-size: 1.6rem;
    text-transform: uppercase;
}

.about__description{
    font-size: 1.3rem;
    color: var(--color-principal);
}

.tags__container{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:1rem;
}

.tags__tag{
    display: inline-block;
    padding: 0.5rem 1rem;
    color:var(--color-principal);
    background-color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    border-radius: 0.3rem;
    transition: all 300ms ease-in-out;
    font-size: 1.3rem;
}

.tags__tag:hover{
    background-color: transparent;
}

.footer__center-container{
    width: 33%;
}

.footer__list-popular{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:2rem
}

.list-popular__item{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap:1rem
}

.list-popular__container-info{
    flex-basis: 75%;
    font-size: 1.3rem;
}

.list-popular__title{
    font-size: 1.5rem;
}

.footer__description{
    width: 100%;
    color: var(--color-principal);
    padding: 2rem;
    background-color: #333333;
}

.footer__text{
    width: 55%;
    margin: 0 auto;
}