.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); } }