/* Structure principale */
main{

    display: flex;
    flex-direction: column;
    align-items: center;

    .separator{
        width: 80%;
    }
    
    article{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--main-gap);
        padding: var(--padding-container);
        margin: 5rem 0rem; 
    
    }
    
    
    

    .title{
        font-size: 2rem;
        padding: 2.5rem;
        text-align: center;
        color: var(--text-color);
        width: 100%;

        .separator{
            margin: 2rem 0;
            width: 100%;
        }

    }

    .mission{
        display: flex;
        align-items: center;
        justify-content: center;
        gap:20px;
        transition: ease-in 0.3s ;

        .mission-text{
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
            justify-content: center;
            width: 70%;
            padding: 2.5rem;
                h2{
                    color: var(--text-color);
                    font-size: var(--h2-font-size);
                    text-align: center;
                    
                }

                p{
                    color: var(--text-color);
                    font-size: var(--principal-font-size);
                    text-align: justify;
                }
            }

        .mission-img{
            background-repeat: no-repeat;
            background-size: cover;
            border: var(--border-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-border);
            width: 30%;
            height : 20rem ;
        }
    }
    .mission1{
        background-image: url("../../images/missions/mission1-GsQ1VaO.webp");
    }
    .mission2{
        background-image: url("../../images/missions/mission2-pp9hpMw.webp");
    }
    .mission3{
        background-image: url("../../images/missions/mission3-jxTps39.webp");
    }
    .mission4{
        background-image: url("../../images/missions/mission4-cyyjQI7.webp");
    }
}



@media  screen and (max-width: 600px) {
    main{
        article{
            gap: 2rem;
            .mission{
                flex-direction: column;
                align-items: center;
        
                .mission-text{
                    width: 100%;
                    text-align: center;
                }
                .mission-img{
                    width: 100%;
                   
                }
            }
        }

    }
    h2{
        text-align: center;
    }
}