main{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

img{
    border-left: 2px solid var(--black);
    height: calc(100vh - var(--headerWidth));
    width: 100%;
    object-fit: cover;
}

.text{
    width: calc((100vw - var(--headerWidth) - 4vw) / 2);
    padding: 2vw;
}


@media(max-width:  1200px){
    #courant{
        font-size: 22px;
    }
}


@media(max-width:  950px){
    main{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .text{
        width: calc(100vw - var(--headerWidth) - 4vw);
    }

    img{
        border-left: 0;
        border-top: 2px solid var(--black);
        height: 50%;
    }
}



@media(max-width:  650px){
    
}


@media(max-width:  480px){
    .text{
        width: 96vw;
    }

    main{
        grid-template-columns: 1fr;
        grid-template-rows: auto 300px;
    }

    img{
        height: 100%;
    };

}