wondif_vue/app/assets/scss/component/_fiche.scss

  .fiche_header_wp {
    display: grid;
    
    @media (min-width: 0px) and (max-width: 600px) {
      grid-template-columns: 1fr;
      grid-template-rows: auto 510px 20px 200px;
      padding-top: 40px;
    }
    @media (min-width: 600px) {
      grid-template-columns: minmax(10px, 10px) 580px 0px;
      grid-template-rows: 40px 280px 20px 230px;
    }
    @media (min-width: 700px) {
      grid-template-columns: minmax(10px, 10px) 660px 0px;
      grid-template-rows: 70px 250px 90px 300px;
    }
    @media (min-width: 800px) {
      grid-template-columns: minmax(10px, 10px) 780px minmax(10px, 10px);
      grid-template-rows: 60px 280px 70px 300px;
    }   
    @media (min-width: 900px) {
      grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
      grid-template-rows: 90px 340px 100px 250px;
    }
    @media (min-width: 1000px) {
      grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
      grid-template-rows: 90px 340px 120px 270px;
    }
    @media (min-width: 1100px) {
      grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
      grid-template-rows: 90px 340px 140px 290px;
    }
    @media (min-width: 1200px) {
      grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
      grid-template-rows: 90px 340px 160px 330px;
    }
    @media (min-width: 1300px) {
      grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
      grid-template-rows: 90px 340px 160px 330px;
    }
    @media (min-width: 1400px) {
      grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
      grid-template-rows: 90px 340px 160px 380px;
    }
    @media (min-width: 1500px) {
      grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
      grid-template-rows: 90px 340px 160px 380px;
    }

    .fiche_header_wp_gauche {
        
        @media (min-width: 0px) and (max-width: 600px) {
        display: none;
        }
        @media (min-width: 600px) {
        grid-column: 1;
        }
    }
    .fiche_header_wp_gauche_carre {
        
        @media (min-width: 0px) and (max-width: 600px) {
        display: none;
        }
        @media (min-width: 600px) {
        grid-column: 1;
        grid-row: 4;
        }
        background-color: var(--c-backgroud-black);
    }
    .fiche_header_wp_droite {

        @media (min-width: 0px) and (max-width: 600px) {
        display: none;
        }
        @media (min-width: 600px) {
        grid-column: 3;
        }
    }

    .fiche_header_inner {
        
        
        @media (min-width: 0px) and (max-width: 600px) {
        grid-column: 1;
        grid-row: 1/5;
        }
        @media (min-width: 600px) {
        grid-column: 2;
        grid-row: 1/5;
        }
        display: grid;
        
        @media (min-width: 0px) and (max-width: 600px) {
        grid-template-columns: 4fr 1fr 0.5fr;
        grid-template-rows: auto 510px 20px 200px; 
        }
        @media (min-width: 600px) {
        width: 575px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 40px 280px 20px 230px;
        }
        @media (min-width: 700px) {
        width: 675px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 70px 250px 90px 300px;
        }
        @media (min-width: 800px) {
        width: 780px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 60px 280px 70px 300px;
        }   
        @media (min-width: 900px) {
        width: 860px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 90px 340px 100px 250px;
        }
        @media (min-width: 1000px) {
        width: 950px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 90px 340px 120px 270px;
        }
        @media (min-width: 1100px) {
        width: 1020px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 90px 340px 140px 290px;
        }
        @media (min-width: 1200px) {
        width: 1100px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 90px 340px 160px 330px;
        }
        @media (min-width: 1300px) {
        width: 1200px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 90px 340px 160px 330px;
        }
        @media (min-width: 1400px) {
        width: 1300px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 90px 340px 160px 380px;
        }
        @media (min-width: 1500px) {
        width: 1400px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 90px 340px 160px 380px;
        }
        @media (min-width: 1600px) {
        width: 1400px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 90px 340px 160px 380px;
        }
        @media (min-width: 1700px) {
        width: 1400px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 90px 340px 160px 380px;
        }
        @media (min-width: 1800px) {
        width: 1400px;
        grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
        grid-template-rows: 90px 340px 160px 380px;
        }
    }

    .fiche_header_titres {
        
        @media (min-width: 0px) and (max-width: 600px) {
        grid-column: 1;
        grid-row: 1;
        padding-bottom: 20px;
        padding-left: 10px;
        }
        @media (min-width: 600px) {
        grid-column: 1;
        grid-row: 2;
        }
        display: grid;
        align-content: start;
        gap: 0.75rem;
        h1 {
        font-size: 55px;
        @media (min-width: 0px) and (max-width: 600px) {
            font-size: 25px;  
        }
        @media (min-width: 600px) {
            font-size: 25px;
        }
        @media (min-width: 700px) {
            font-size: 30px;
        }
        @media (min-width: 800px) {
            font-size: 30px;
        }   
        @media (min-width: 900px) {
            font-size: 40px;
        }
        @media (min-width: 1000px) {
            font-size: 40px;
        }
        @media (min-width: 1100px) {
            font-size: 40px;
        }
        @media (min-width: 1200px) {
            font-size: 50px;
        }
        @media (min-width: 1300px) {
            font-size: 55px;
        }
        @media (min-width: 1400px) {
            font-size: 55px;
        }
        @media (min-width: 1500px) {
            font-size: 55px;
        }
        @media (min-width: 1600px) {
            font-size: 55px;
        }
        @media (min-width: 1700px) {
            font-size: 55px;
        }
        @media (min-width: 1800px) {
            font-size: 55px;
        }
        }
    }

    .fiche_header_img {
        
        @media (min-width: 0px) and (max-width: 600px) {
        grid-column: 1 / 4;
        grid-row: 2 / 4; 
        }
        @media (min-width: 600px) {
        grid-column: 3 / 5;
        grid-row: 1 / 5;
        }
        overflow: hidden;
        .ds-media {
        height: 100%;
        }
    }

    .fiche_header_infos {

        @media (min-width: 0px) and (max-width: 600px) {
        grid-column: 1 / 2;
        grid-row: 4;
        margin-top: -30px;
        }
        @media (min-width: 600px) {
        grid-column: 1;
        grid-row: 4;
        }
        display: grid;
        align-content: center;
        justify-content: end;
        
        @media (min-width: 0px) and (max-width: 700px) {
        gap: 7px;  
        }
        @media (min-width: 700px) {
        gap: 20px;
        }

        text-align: right;
        .fiche_header_infos_genre {
        font-weight: 900;
        
        }
    }
    .fiche_header_bandeau {

        @media (min-width: 0px) and (max-width: 600px) {
        grid-column: 1 / 3;
        grid-row: 4;
        margin-top: -30px;
        }
        @media (min-width: 600px) {
        grid-column: 1 / 4;
        grid-row: 4;
        }
        background-color: var(--c-backgroud-black);
    }
    }