/*
* Este archivo es parte de Nabu.
*
* Nabu es software libre: puedes redistribuirlo y/o modificarlo
* bajo los términos de la Licencia Pública General de GNU Affero publicada por
* la Free Software Foundation, ya sea la versión 3 de la Licencia, o
* (a su elección) cualquier versión posterior.
*
* Nabu se distribuye con la esperanza de que sea de utilidad,
* pero SIN NINGUNA GARANTÍA; incluso sin la garantía implícita de
* COMERCIABILIDAD o APTITUD PARA UN PROPÓSITO PARTICULAR. Consulte la
* Licencia Pública General de GNU Affero para obtener más detalles.
*
* Debería haber recibido una copia de la Licencia Pública General de GNU Affero
* junto con este programa. De lo contrario, consulte <https://www.gnu.org/licenses/>.
*/

.hero__img-wrapper {
    flex-basis: 50%;
    max-width: 450px;
}

/* Estilos de la sección de los post más populares */

.popular-posts {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 60px auto;
    padding: 0;
    text-align: initial;
    background-color: initial;
}

.popular-posts__title {
    width: 30%;
    margin-bottom: 0;
}

.popular-cards__container {
    width: auto;
    padding: 15px 0;
    gap: 0;
    overflow-x: hidden;
    scroll-snap-type: initial;
}

.popular-cards__container > .card {
    width: auto;
    max-width: 280px;
}

/* Arreglar la altura de la la informacion, restarle la altura del banner */
.popular-cards__container .card .card__info {
    height: calc(100% - 259px);
}

.popular-cards__container .card:not(.card:last-child) {
    min-width: initial;
    width: 80px;
    transition: all ease-in-out 400ms;
}

.popular-cards__container .card:hover:not(.card:last-child) {
    width: 280px;
}

.popular-cards__container .card:not(.card:last-child) .card__author {
    opacity: 0;
    transition: all ease-in 400ms;
}

.popular-cards__container .card:hover:not(.card:last-child)  .card__author{
    opacity: 1;
}

/*
.popular-cards__container .card:hover:not(.card:last-child) ~ .card:last-child {
    right: -200px;
}
*/

/* Estilos para la seccion de articulos mas recientes */
.recent-posts__title {
    font-size: 2.8rem;
    margin-bottom: 25px;
}

.recent-cards__container > .card {
    width: 100%;
}

/* Estilos para el CTA */
.CTA__title {
    font-size: 2.4rem;
}