/* ******************************************** */
/** Articles
/* ******************************************** */

.c-articles__item{
    padding: 26px 22px 32px;
    border: 1px solid var(--color-lightgreen);
}

.c-articles__item:not(:first-child){
    margin-top: var(--section-y);
}

.c-articles__item-title{
    font-size: clamp(2.5rem, 3.43vw, 4.8rem);
    flex-flow: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.c-articles__item-btn{
    margin-top: calc(var(--separator)*1.4);
}


/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    .c-articles__list{
        display: flex;
        gap: var(--section-y) 24px;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .c-articles__item{
        width: calc(50% - 12px);
        border: none;
        padding: 0;
        overflow: hidden;
    }

    .c-articles__item:not(:first-child){
        margin-top: 0;
    }

}


/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    .c-articles__list{
        gap: var(--section-y) 44px;
    }

    .c-articles__item{
        width: calc(50% - 22px);
    }
}


/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {

    .c-articles{
        position: relative;
        padding-left: calc(var(--space-x) * 1.5 + 50px);
        padding-right: calc(var(--space-x) * 1.5 + 50px);
    }

    .c-articles:before{
        content: "";
        display: block;
        position: absolute;
        background-color: var(--color-gray);
        top: 0;
        bottom: 0;
        left: calc(var(--space-x) - 20px);
        width: 70%;
        width: 1px;
        opacity: .17;
        background-color: var(--color-darkgreen);
    }

    .c-articles__list{
        gap: var(--section-y) 48px;
    }

    .c-articles__item{
        width: calc(50% - 24px);
    }


}


/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {

    .c-articles__list{
        gap: var(--section-y) 90px;
    }

    .c-articles__item{
        width: calc(50% - 45px);
    }
}


/* ********************** de Hd a FULL HD ********************** */

@media (min-width: 1600px) {
    .c-articles:before{
        left: calc(var(--space-x) - 80px);
    }

}