@charset "UTF-8";

.ftc-pedagogy {
    padding: 40px var(--global-block-padding);
}
.ftc-pedagogy__title {
    font-size: 32px;
    line-height: 36px;
    margin-bottom: 15px;
    color:var(--pmn--pink);
}
.ftc-pedagogy__text {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 25px;
}
.ftc-pedagogy__card {
    border-radius: 20px;
    padding: 40px 25px;
    margin-bottom: 20px;
}
.ftc-pedagogy__card__title {
    font-size: 24px;
    line-height: 28px;
    margin: 10px 0 15px;
}

.ftc-pedagogy[style="background-color: var(--pmn--pink);"] .ftc-pedagogy__card__title,
.ftc-pedagogy[style="background-color: var(--pmn--pink);"] .ftc-pedagogy__card__text{
    color:black;
}
.ftc-pedagogy__card__text {
    margin-bottom: 15px;
}

.ftc-pedagogy__card__picto {
    object-fit: contain;
}
@media screen and (max-width: 767px) {
    .ftc-pedagogy__card {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }
    .ftc-pedagogy__card:first-child {
        margin-top: 50px;
    }
    .ftc-pedagogy__card__text,
    .ftc-pedagogy__card__title {
        text-align: center;
    }
    .ftc-pedagogy__card__picto {
        width: 45px;
        height: 45px;
    }
    .ftc-pedagogy__card__cta {
         justify-content: center;
    }
    .ftc-pedagogy h2 {
        line-height:1.3 ;
    }
}

@media screen and (min-width: 768px) {
    .ftc-pedagogy {
        display: grid;
        grid-template-areas: "title cards"
                             "text  cards"
                             "cta   cards"
                             ".     cards";
        column-gap: 6vw;
    }
    .ftc-pedagogy__title {
        font-size: 48px;
        line-height: 52px;
        margin-bottom: 20px;
    }
    .ftc-pedagogy__text {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 35px;
    }
    .ftc-pedagogy__cta {
        margin: inherit;
    }
    .ftc-pedagogy__cards {
        grid-area: cards;
    }
    .ftc-pedagogy__card {
        display: grid;
        grid-template-areas: "picto ."
                             "picto ."
                             "picto .";
        grid-template-columns: 100px auto;
    }
    .ftc-pedagogy__card.has-image {
        display: grid;
        grid-template-areas: "picto ."
                             "picto ."
                             "picto .";
        grid-template-columns: 100px auto;
        column-gap: 30px;
        align-items:center;
    }
    .ftc-pedagogy__card {
       display: flex;
       flex-direction: column;
    }
    .ftc-pedagogy__card__picto {
        grid-area: picto;
        width: 100px;
        height: 100px;
    }
    .ftc-pedagogy__cta {
        justify-self: flex-start;
    }
    .ftc-pedagogy h2 {
        line-height:1.25 ;
    }
}