wondif_vue/app/assets/scss/component/_header_full.scss

@use '../base/colors' as *;
@use '../layout/media_queries';

.header_full {
    display: grid;
    
    grid-template-rows: 130px auto auto;

    @include media_queries.media_min(tablet_600) {
        grid-template-columns: 1fr 500px 1fr;
    }
    @include media_queries.media_min(tablet_900) {
        grid-template-columns: 1fr 890px 1fr;
    }
    @include media_queries.media_min(desktop_1000) {
        grid-template-columns: auto 980px auto;
    }
    @include media_queries.media_min(desktop_1100) {
        grid-template-columns: auto 1090px auto;
    }
    @include media_queries.media_min(desktop_1200) {
        grid-template-columns: auto 1160px auto;
    }
    @include media_queries.media_min(desktop_1300) {
        grid-template-columns: 1fr 1250px 1fr;
    }
    @include media_queries.media_min(desktop_1500) {
        grid-template-columns: 1fr 1420px 1fr;
    }
    @include media_queries.media_min(desktop_1800) {
        grid-template-columns: 1fr 1700px 1fr;
    }
    

    nav {
        color: $blanc;
        a {
            color: $blanc;
        }
    }

    .header_navigation {
        grid-column: 2;
        grid-row: 1;
        z-index: 10;
    }
    .obscur {
        grid-column: 1 / -1;
        grid-row: 1;
        z-index: 5;
        //background-color: #0000007a;
        background-color: rgba(0,0,0,.4);
    }
    .header-img_cont {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }
    .header-img_text {
        grid-column: 2;
        grid-row: 3;
        color: $blanc;

        width: 650px;

        margin-left: 80px;
        margin-bottom: 150px;


        .header-img_titre {
            margin-bottom: 10px;
            text-transform: uppercase;
            font-family: 'barlow_black';
            font-size: 50px;
        }
        .header-img_description {
            margin-bottom: 20px;
            font-family: 'barlow_regular';
            font-size: 20px;
        }

        .decouvrir {
            display: flex;
            .decouvrir_icone {
                margin-top: 2px;
                margin-right: 5px;
            }
            .decouvrir_texte {
                font-family: 'barlow_regular';
                font-size: 18px;
            }
        }
    }

}

.header_full_2 {
    display: grid;

    @include media_queries.media_min(tablet_600) {
        grid-template-rows: 117px auto auto;
    }
    @include media_queries.media_min(tablet_900) {
        grid-template-rows: 117px auto auto;
    }
    @include media_queries.media_min(desktop_1800) {
        grid-template-rows: 130px auto auto;
    }

    @include media_queries.media_min(tablet_600) {
        grid-template-columns: 1fr 500px 1fr;
    }
    @include media_queries.media_min(tablet_900) {
        grid-template-columns: 1fr 890px 1fr;
    }
    @include media_queries.media_min(desktop_1000) {
        grid-template-columns: auto 980px auto;
    }
    @include media_queries.media_min(desktop_1100) {
        grid-template-columns: auto 1090px auto;
    }
    @include media_queries.media_min(desktop_1200) {
        grid-template-columns: auto 1160px auto;
    }
    @include media_queries.media_min(desktop_1300) {
        grid-template-columns: 1fr 1250px 1fr;
    }
    @include media_queries.media_min(desktop_1500) {
        grid-template-columns: 1fr 1420px 1fr;
    }
    @include media_queries.media_min(desktop_1800) {
        grid-template-columns: 1fr 1700px 1fr;
    }


    nav {
        color: $noir;
        a {
            color: $noir;
        }
    }

    .header_navigation {
        grid-column: 2;
        grid-row: 1;
        z-index: 10;
    }
    .obscur {
        grid-column: 1 / -1;
        grid-row: 1;
        z-index: 5;
        background-color: rgb(255 255 255 / 98%);
    }
    .header-img_cont {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }

    .header-img_text {
        grid-column: 2;
        grid-row: 3;
        color: $blanc;

        width: 650px;
 

        margin-left: 80px;
        margin-bottom: 150px;


        .header-img_titre {
            display: inline-block;
            background-color: $rouge_transparent;

            padding-bottom: 5px;
            padding-left: 10px;
            padding-right: 10px;
            text-transform: uppercase;
            font-family: 'barlow_black';
            font-size: 50px;
        }
        .header-img_description {
            display: inline-block;
            background-color: $rouge_transparent;
            padding-bottom: 20px;
            padding-top: 5px;
            padding-left: 10px;
            padding-right: 10px;
            font-family: 'barlow_regular';
            font-size: 20px;
        }

        .decouvrir {
            display: flex;
            
            .decouvrir_icone {
                display: inline-block;
                background-color: $rouge_transparent;
                padding-top: 2px;
                padding-left: 10px;
                padding-right: 5px;
                padding-bottom: 5px;
            }
            .decouvrir_texte {
                display: inline-block;
                background-color: $rouge_transparent;
                padding-bottom: 5px;
                font-family: 'barlow_regular';
                font-size: 18px;
                padding-right: 10px;
            }
        }
    }

}