.s4-carousel-jaune {
margin: 0 0 100px;
}
.s4-carousel-jaune .item {
background: #f7f7f7;
transition: all 0.2s ease-in-out;
height: 350px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: start;
justify-content: end;
padding: 40px;
color: black;
}
.s4-carousel-jaune .item .titre {
font-weight: 600;
max-width: 70%;
}
.s4-carousel-jaune .item .texte {
height: 0;
opacity: 0;
transition: all 0.8s;
overflow: hidden;
}
.s4-carousel-jaune .item:hover {
background: #e6e245;
color: black;
}
.s4-carousel-jaune .item:hover .texte {
height: 100px;
opacity: 1;
padding-top: 15px;
}
.buttonBorder {
position: absolute;
bottom: 0;
right: 0;
}
.buttonBorder .Button_Button__vVAZK {
display: inline-flex;
justify-content: center;
align-items: center;
outline: 0;
text-decoration: none;
color: #000;
cursor: pointer;
}
.buttonBorder .Button_Button__vVAZK > span {
display: flex;
align-items: center;
width: 100%;
height: 100%;
z-index: 1;
transition: 0.15s;
}
.buttonBorder .Button_ArrowCont__WrhN_ {
background-color: #fff;
padding: 10px;
border-radius: 50% 0 0 0;
margin: 0 -10px -10px 0;
}
.buttonBorder .Button_ArrowCont__WrhN_ > svg {
display: block;
width: 20px;
position: absolute;
top: -20px;
right: 10px;
transform: rotate(180deg) scale(1.01);
}
.buttonBorder .Button_ArrowCont__WrhN_ > svg:last-of-type {
top: auto;
bottom: 10px;
right: auto;
left: -20px;
}
.buttonBorder .Button_Arrow__LawjV {
width: 50px;
height: 50px;
background-color: #58595b;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.buttonBorder .Button_Arrow__LawjV > svg {
display: block;
width: 21px;
height: 14px;
transition: 0.3s;
}
@media (max-width: 1199px) {
.s4-carousel-jaune {
margin: 0 0 100px 0;
}
.s4-carousel-jaune .item:hover .texte {
height: 100%;
}
}
@media (max-width: 991px) {
.s4-carousel-jaune .item .titre {
max-width: 100%;
}
}
@media (max-width: 575px) {
.s4-carousel-jaune .item {
background: #e6e245;
color: black;
height: fit-content;
}
.s4-carousel-jaune .item .titre {
padding-bottom: 10px;
}
.s4-carousel-jaune .item .texte {
height: 100%;
opacity: 1;
}
}.s4-carrousel-texte {
margin: 0 0 100px;
}
.s4-carrousel-texte .item {
color: #ffffff !important;
position: relative;
background: #f7f7f7;
border-radius: 20px;
}
.s4-carrousel-texte .item .background {
height: 350px;
position: relative;
}
.s4-carrousel-texte .item .background .content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: end;
padding: 30px;
}
.s4-carrousel-texte .item .content .titre {
font-weight: 600;
color: #58595b;
font-size: 20px;
}
.s4-carrousel-texte .item .content .texte {
font-weight: 300;
color: #58595b;
}
@media (max-width: 1199px) {
.s4-carrousel-texte .item .background {
height: 259px;
}
}
@media (max-width: 575px) {
.s4-carrousel-texte .item .background .content {
justify-content: center;
}
}