/* COLUMNS WITH TEXT AND CARDS */

section.columns-cards .cards {
    min-width: calc(58% - (var(--column-gap) / 2));
}

/* Cards */
/* figure.card.card-img:nth-child(2) {
    transform: translateY(-38px);
}
figure.card.card-img:nth-child(3) {
    transform: translateY(38px);
} */
.card *:not(p){
    margin-bottom: calc(var(--body-size) / 1);
}

.card figcaption .p {
    font-weight: 600;
}

/* @media screen and (max-width:1280px) {
    
    figure.card.card-img:nth-child(2) {
        transform: translateY(-28px);
    }
    figure.card.card-img:nth-child(3) {
        transform: translateY(28px);
    }
} */

section.columns-cards .content.col-5 {
    width: calc(50% - ((var(--column-gap) * 2) / 3));
}

section.columns-cards .container:not(.columns) .cards {
    margin-top: 50px;
} 

@media screen and (max-width:1024px) and (min-height:768px) and (orientation:portrait) {

    section.columns-cards .content,
    section.columns-cards .cards {
        width:100%;
        min-width:100%;
    }
    figure.card.card-img:nth-child(2),
    figure.card.card-img:nth-child(3) {
        transform: unset;
    }

}

@media screen and (min-width:800px) and (max-width:1024px) and (orientation:portrait) {

    section.columns-cards .container {
        gap:calc(var(--column-gap) * 2)
    }
    
    section.columns-cards .content {
        padding-right: calc(30% + var(--column-gap));
    }

    section.columns-cards .cards {
        justify-content: flex-start;
    }

    .card.card-img {
        width:calc(50% - (var(--column-gap) / 2));
    }

    .card.card-img:nth-child(2),
    .card.card-img:nth-child(3) {
        transform: unset;
        /* margin-top: -50%; */
    }

}

@media screen and (max-width:900px) and (orientation:portrait) {
    section.columns-cards .container:not(.column) .cards {
        margin-top: 25px !important;
    } 
    section.columns-cards .container:not(.column) .content.col-5 {
        padding: 0 !important;
    }
    section.columns-cards .cards {
        justify-content: flex-start !important;
    }
    section.columns-cards .container:not(.column) figure.card.card-img.col-5 {
        width: calc(33.330% - ((var(--column-gap) * 4) / 5));
        /* width: 100% !important;
        display: flex; */
        justify-content: space-between;
        align-items: flex-start;
    }
}

@media screen and (max-width:768px) and (orientation:portrait) {

    section.columns-cards .container.column .content > *:not(p, a){
        padding-right:30%;
    }

}

@media screen and (max-width:520px) {

    section.columns-cards .container:not(.column) figure.card.card-img.col-5 {
        width: 100% !important;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    section.columns-cards .container {
        gap:calc(var(--column-gap) * 3)
    }

    section.columns-cards .content, section.columns-cards .cards {
        width: 100%;
        min-width: 100%;
    }

    .card.card-img:nth-child(2),
    .card.card-img:nth-child(3) {
        transform: unset!important;
    }

    section.columns-cards .content > *:not(p, a){
        padding-right:10%;
    }
    section.columns-cards .content > a button {
        width:100%;
    }
    .card.card-img {
        width:100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    section.columns-cards .cards {
        gap: calc(var(--column-gap) * 2)
    }

    .card.card-img:nth-child(odd){
        flex-direction: row-reverse;
    }

    /* .card.card-img:nth-child(even) * {
        text-align: right;
    } */

    .card.card-img > * {
        width:calc(50% - (var(--column-gap) / 1));
        margin: 0;
    }

    .card.card-img div {
        height: 180px;
    }

    section.columns-cards a {
        margin: 0 auto;
        min-width: 80%;
    }

    section.columns-cards a button {
        margin-top: 0;
        width: 100%;
    }

}

@media screen and (max-width:520px) {
    section.columns-cards .card.card-img figcaption small {
        font-size: var(--body-size);
    }
}