.bandeau-moderne {
display: flex;
flex-direction: row;
align-items: center;
max-width: var(min(100%, 1280px));
margin: 32px 0;
}
.bandeau-moderne.texte-a-gauche .containerLeft {
order: 1;
margin-right: -9vw;
}
.bandeau-moderne.texte-a-gauche .containerRight {
order: 2;
}
.bandeau-moderne.texte-a-droite .containerLeft {
order: 2;
margin-left: -9vw;
margin-right: 0;
}
.bandeau-moderne.texte-a-droite .containerRight {
order: 1;
}
.bandeau-moderne .containerLeft {
display: flex;
padding: 24px 36px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
background: var(--Secondaire, #FCF9F5);
width: 75%;
z-index: 9;
}
.bandeau-moderne .containerLeft h2 {
color: var(--Principal, #174A42);
font-family: Pontiac;
font-size: 24px;
font-style: normal;
font-weight: 900;
line-height: 32px; text-transform: uppercase;
width: 100%;
margin: 0;
}
.bandeau-moderne .containerLeft .texte {
color: var(--Principal, #174A42);
font-family: Pontiac;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; }
.bandeau-moderne .containerRight img.bandeau-image {
width: 570px;
max-width: 100%;
min-height: 500px;
object-fit: cover;
display: block;
} @media screen and (min-width: 1281px) {
.bandeau-moderne {
padding-left: calc((100vw - 1280px) / 2);
padding-right: calc((100vw - 1280px) / 2);
}
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
.bandeau-moderne {
padding-left: calc((100vw - 1024px) / 2);
padding-right: calc((100vw - 1024px) / 2);
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.bandeau-moderne {
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (max-width: 767px) {
.bandeau-moderne {
display: flex;
flex-direction: column;
gap: 0x;
padding: 0px;
}
.texte-a-droite{
display: flex;
flex-direction: column-reverse;
}
.bandeau-moderne .containerLeft {
width: 100%;
margin-right: 0;
padding: 32px 16px;
gap: 16px;
}
.bandeau-moderne .containerLeft .texte {
font-size: 14px;
}
.bandeau-moderne .containerRight {
background: var(--Secondaire, #FCF9F5);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.bandeau-moderne .containerRight img.bandeau-image {
width: 100%;
min-height: 250px;
max-height: 500px;
}
.bandeau-moderne.texte-a-gauche .containerLeft {
margin-right: 0vw;
}
.bandeau-moderne.texte-a-droite .containerLeft {
margin-left: 0vw;
}
}