.realisation3 { height: auto; } .realisation3 .parent { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; height: 60rem; margin: -10px; } .realisation3 .parent img { width: 100%; height: 100%; max-width: none; object-fit: cover; max-height: none !important; border-radius: var(--border-radius); cursor: pointer; } .realisation3 .div1 { grid-area: 1 / 1 / 3 / 3; margin: 10px; } .realisation3 .div2 { grid-area: 1 / 3 / 2 / 4; margin: 10px; } .realisation3 .div3 { grid-area: 1 / 4 / 2 / 5; margin: 10px; } .realisation3 .div4 { grid-area: 2 / 3 / 4 / 5; margin: 10px; } .realisation3 .div5 { grid-area: 3 / 1 / 4 / 2; margin: 10px; } .realisation3 .div6 { grid-area: 3 / 2 / 4 / 3; margin: 10px; } @media (max-width: 768px) { .realisation3 .parent { grid-template-columns: 1fr; height: auto; } .realisation3 .div1, .realisation3 .div2, .realisation3 .div3, .realisation3 .div4, .realisation3 .div5, .realisation3 .div6 { grid-area: auto; margin: 10px; } .titre_article_secondaire { padding: 5px 15px; margin: 0; font-size: 1.5rem; text-align: left; } }
.left_image_right_text_2 { border-radius: var(--border-radius); display: flex; min-height: fit-content; box-shadow: rgba(14, 30, 37, 0) 0px 2px 4px 0px, rgba(14, 30, 37, 0.22) 0px 2px 16px 0px; } .image_left_2 { width: 35%; display: flex; } .image_left_2 img { object-fit: cover; border-bottom-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius); overflow: hidden; width: 100%; margin-bottom: 0px; max-width: none; cursor: pointer; max-height: none !important; } .text_right_2 { width: 65%; padding: 30px; display: flex; flex-direction: column; justify-content: center; } .text_right_2 h2 { margin-bottom: 5px; font-size: 1.5rem; } .text_right_2 p { margin: 10px 0px; } .text_right_2 a { background-color: var(--second-color); padding: 10px 20px; color: white; border-radius: var(--border-radius); text-decoration: none; font-size: 1rem; cursor: pointer; margin-top: 5px; width: fit-content; } @media screen and (max-width: 768px) { .left_image_right_text_2 { flex-direction: column; height: auto; margin: 0px; } .image_left_2 { width: 100%; } .text_right_2 p { margin-top: 10px; } .text_right_2 { width: 100%; padding: 20px; } .image_left_2 img { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); border-bottom-left-radius: 0px; } }
.template22 { width: 100%; display: flex; flex-direction: column; } .template22_hero { display: flex; align-items: center; gap: 50px; } .template22_hero_content { flex: 1; display: flex; flex-direction: column; gap: 20px; } .template22_hero h2 { font-size: 1.5rem; margin: 0; line-height: 1.3; } .template22_hero p { font-size: 1rem; margin: 0; line-height: 1.6; } .template22_buttons { display: flex; gap: 15px; margin-top: 10px; } .template22_buttons a { padding: 12px 28px; background-color: var(--second-color); color: white; text-decoration: none; border-radius: var(--border-radius); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; font-size: 1rem; } .template22_buttons a:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); } .template22_secondary { background-color: transparent !important; border: 2px solid var(--second-color); color: var(--second-color) !important; } .template22_hero_image { flex: 0 0 45%; height: 400px; position: relative; border-radius: var(--border-radius); overflow: hidden; } .template22_hero_image img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; position: absolute; top: 0; left: 0; max-height: none; } @media (max-width: 768px) { .template22_hero { flex-direction: column; gap: 30px; } .template22_hero_content { width: 100%; } .template22_hero_image { width: 100%; flex: none; height: 250px; } .template22_buttons { flex-direction: column; gap: 10px; } .template22_buttons a { width: 100%; text-align: center; } }