body {
    width: 100%;
    margin: 0;
}

@media (min-width:400px) {
    .container {
        display: grid;
        grid-template-rows: 150px auto 220px 100px;
        grid-template-columns: auto;
        grid-template-areas: "top_banner" "text" "logo" "bottom";
    }

        .container .top_banner {
            grid-area: top_banner;
            display: grid;
            background-color: #4370b7;
            grid-template-rows: auto;
            grid-template-columns: 1fr 6fr;
            grid-template-areas: ". title"
        }

            .container .top_banner .title {
                grid-area: title;
                color: white;
                font-size: 4em;
                padding-top: 50px;
            }

        .container .text {
            grid-area: text;
            display: grid;
            grid-template-rows: 1fr 6fr;
            grid-template-columns: 1fr 4fr 1fr;
            grid-template-areas: ". title ." ". content .";
        }

            .container .text .title {
                grid-area: title;
                display: grid;
                padding-top: 50px;
            }

            .container .text .content {
                grid-area: content;
                text-align: justify;
                font-size: 0.7em;
            }

        .container .logo {
            grid-area: logo;
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: 2fr 3fr 3fr 2fr;
            grid-template-areas: ". logo1 logo2 ."
        }

            .container .logo .logo1 {
                grid-area: logo1;
                display: grid;
                grid-template-rows: 3fr 2fr 1fr;
                grid-template-areas: "img" "contact" ".";
            }

                .container .logo .logo1 .img {
                    grid-area: img;
                }

                .container .logo .logo1 .contact {
                    grid-area: contact;
                }

            .container .logo .logo2 {
                grid-area: logo2;
                display: grid;
                grid-template-rows: 3fr 2fr 1fr;
                grid-template-areas: "img" "contact" ".";
            }

                .container .logo .logo2 .img {
                    grid-area: img;
                }

                .container .logo .logo2 .contact {
                    grid-area: contact;
                }

        .container .bottom {
            grid-area: bottom;
            display: grid;
            background-color: #4370b7;
        }
}

/*///////////////////////////////////////////////*/
/*//////////  Pour tablette       ///////////////*/
/*///////////////////////////////////////////////*/
@media (min-width: 750px) {
    .container .text .content {
        font-size: 0.9em;
    }

    .container .text {
        grid-template-rows: 1fr 4fr;
    }
}

/*///////////////////////////////////////////////*/
/*//////////  Pour écran Standard ///////////////*/
/*///////////////////////////////////////////////*/


@media (min-width: 1200px) {
    .container .text .content {
        font-size: 1.0em;
    }

    .container .text {
        grid-template-rows: 1fr 3fr;
    }
}