.header-carousel-swiper {
width: 100%;
height: auto;
position:relative;
}
.slide__content{
width:80%;
display:flex;
margin:150px 0;
}
.carousel__header__logo{
width:50%;
display: flex;
flex-direction: column;
align-items: flex-start;
& .baseline{
position: relative;
color: white;
font-size: 2.3rem;
letter-spacing:0;
width:100%;
text-align:left;
margin:30px 0;
line-height: 1;
text-shadow: rgba(0, 0, 0, 0.10) 0px 3px 15px;
}
}
#logo__carousel{
width:250px;
position: relative;
object-fit: contain;
aspect-ratio: auto;
}
.content__carousel{
position: relative;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
& h3{
color:white;
width:100%;
max-width:650px;
font-size: 2.5rem;
line-height: 1.1;
text-align:left;
font-family:'PoppinsBold';
text-shadow: rgba(0, 0, 0, 0.20) 0px 3px 15px;
}
}
#carousel__button{
width:100%;
max-width:400px;
& button{
color:white;
font-family:'PoppinsBold';
border:1px solid var(--orange);
}
}
#carousel__button button:hover, #carousel__button button:focus{
color:var(--orange);
border:1px solid white;
}
#carousel__button button:active{
background-color:var(--orange);
color:white;
border:1px solid var(--orange);
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.carousel__image {
width: 100%;
object-fit: cover;
position:absolute;
}
.overlay__carousel{
position:absolute;
}
.carousel__slider .swiper-pagination-bullet {
width: 10px;
height: 10px;
opacity: 1;
background: none;
border: 3px solid white;
}
.carousel__slider .swiper-pagination-bullet-active {
background: white !important;
}
#carousel__arrow__right{
background-image: url(//les-beaux-jours.fr/wp-content/themes/les-beaux-jours_V2/assets/images/icons/arrow.svg);
scale:1.2;
right:20px !important;
rotate: 180deg;
}
#carousel__arrow__left{
background-image: url(//les-beaux-jours.fr/wp-content/themes/les-beaux-jours_V2/assets/images/icons/arrow.svg);
scale:1.2;
left:20px !important;
}
@media screen and (max-width:1200px){
.carousel__header__logo{
width:40%;
}
.content__carousel{
width:60%;
& h3{
font-size: 2.3rem;
}
}
}
@media screen and (max-width:1024px){
.header-carousel-swiper{
height:85vh;
}
.slide__content{
flex-direction: column;
margin:0;
}
.carousel__header__logo{
width:100%;
& #logo__carousel{
width:200px;
}
& .baseline{
font-size:1.8rem;
width:100%;
max-width:400px;
margin:10px 0;
}
}
.content__carousel{
width:100%;
align-items: start;
& h3{
font-size: 1.8rem;
text-align:left;
max-width:fit-content;
}
}
#carousel__button {
max-width:300px;
& button {
padding:15px;
}
}
.carousel__image {
height: 100%;
}
.overlay__carousel{
height:100%;
}
}
@media screen and (max-width:768px){
#carousel__arrow__right{
display:none;
}
#carousel__arrow__left{
display:none;
}
.slide__content{
gap:0px;
margin:0;
}
.carousel__header__logo{
& #logo__carousel{
width:180px;
}
}
.content__carousel{
& h3{
font-size: 1.6rem;
}
}
}
@media screen and (max-width:480px){
.header-carousel-swiper{
height:80vh;
}
.carousel__header__logo{
& #logo__carousel{
width:160px;
}
& .baseline{
font-size:1.6rem;
margin: 15px 0;
}
}
.content__carousel{
& h3{
font-size: 1.4rem;
}
}
#carousel__button {
max-width:300px;
& button {
padding:15px;
}
}
.slide__content{
margin:0;
gap:0;
}
}
@media screen and (max-width:350px){
.content__carousel{
& h3{
font-size:1.2rem;
}
}
#carousel__button{
& button{
padding:10px;
font-size:12px;
}
}
}