body { margin: 0 auto; max-width: 1300px; overflow-x: hidden; } h1 { text-align: center; } h2 { text-align: left; } div.enclosing-grid { display: grid; } div.enclosing-grid img { scale: 90%; } .TL { grid-area: 1 / 1 / 2 / 4; display: flex; justify-content: flex-start; margin-bottom: -4rem; } .TL img { display: inline-block; align-self: flex-start; } .TR { grid-area: 1 / 3 / 2 / 8; z-index: 11; display: flex; width: 100%; justify-content: flex-end; margin-bottom: -4rem; } .TR img { display: inline-block; align-self: flex-start; } .HH { grid-area: 2 / 1 / 3 / 7 ; z-index: 15; display: flex; justify-content: center; height: 100%; border-radius: 1rem 1rem 0 0; width: fit-content; margin: 0 auto; } .HH a { align-self: center; } .HH a img { max-width: 100vw; height: auto; padding: 0 1rem; } .ML { grid-area: 2 / 1 / 6 / 2; z-index: 20; } .ML img { margin-top: -75%; } .CT { grid-area: 3 / 2 / 6 / 5; z-index: 36; max-width: 86vw; background-color: var(--color-background); padding: 1rem; height: 100%; border-radius: 1rem 1rem 0 1rem; } .MR { grid-area: 2 / 5 / 10 / 8; /* grid-area: 2 / 6 / 10 / 9; */ z-index: 17; } .FL { grid-area: 6 / 2 / 8 / 4; z-index: 28; margin-left: 4rem; border-radius: 0 0 0 1rem; } .FR { grid-area: 6 / 4 / 8 / 5; z-index: 29; border-radius: 0 0 1rem 0; } .FR, .FL { margin-bottom: 4rem; background-color: var(--color-background); padding: 1rem; max-width: 86vw; } .BL { grid-area: 5 / 1 / 9 / 4; z-index: 12; text-align: left; display: flex; justify-content: flex-start; } .BL a { align-self: flex-end; } .BC { grid-area: 7 / 1 / 9 / 6; z-index: 14; margin-top: 6rem; text-align: center; } .BR { grid-area: 7 / 1 / 9 / 8; z-index: 13; display: flex; justify-content: flex-end; } .BR img { display: inline-block; align-self: flex-end; } .darkmode div.cadre img, .darkmode div.HH img { filter: sepia(0.25) brightness(1.25) contrast(0.75); } div.block-ghost_index_blog { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } body.fait_ma_page_home iframe, div.lesgv-footer iframe, div.enclosing-grid iframe { height: 14rem; width: 100%; padding-right: 0; padding-bottom: 0; border-radius: 1rem; } @media (max-width: 1200px) { .CT { grid-area: 3 / 2 / 6 / 6; } .FL { grid-area: 6 / 2 / 7 / 6; margin-left: unset; height: 100%; } .FR { grid-area: 7 / 3 / 8 / 6; border-radius: 0 0 1rem 1rem; } .MR { grid-area: 2 / 6 / 10 / 8; } } @media (max-width: 1000px) { div.block-ghost_index_blog{ grid-template-columns: 1fr; } body.fait_ma_page_home iframe, div.lesgv-footer iframe, div.enclosing-grid iframe { padding-right: unset; padding-bottom: unset; } } @media (max-width: 800px) { body { overflow-x: hidden; } div.enclosing-grid div { scale: 60%; } div.enclosing-grid div.CT, div.enclosing-grid div.HH, div.enclosing-grid div.CT div, div.enclosing-grid div.FL, div.enclosing-grid div.FR{ scale: unset; } .HH { grid-area: 2 / 1 / 4 / 8; padding-right: revert; } .CT { grid-area: 4 / 1 / 5 / 8; } .FL { grid-area: 5 / 1 / 6 / 8; border-radius: 0 0 0 0; } .FR { grid-area: 6 / 1 / 7 / 8; } .MR { grid-area: 2 / 3 / 7 / 8; } .BR { grid-area: 5 / 1 / 8 / 8; } .BC { grid-area: 7 / 1 / 8 / 4; } .CT, .FL, .FR { max-width: 83vw; margin: 0 3vw; } div.TL img { position:fixed; left: -12rem; } div.TR img { position:fixed; right: -15rem; } div.ML img { position:fixed; left: -10rem; } div.BC img { position:fixed; bottom: -15rem; } div.MR img { position:absolute; right: -15rem; } div.BL img { position:fixed; left: -10rem; bottom: -22rem; } div.BR img { position:fixed; right: -22rem; bottom: -22rem; } } @media print { div.enclosing-grid { margin: 1rem auto; } img { left: unset; right: unset; } body { margin-left: 5rem; } .CT { grid-area: 4 / 3 / 5 / 7; } .FL { grid-area: 5 / 2 / 6 / 7; margin-left: unset; } .FR { grid-area: 6 / 3 / 7 / 7; } .BC { grid-area: 7 / 4 / 9 / 5; } }