.carousel-progressbar-left-container {
display: flex;
}
.carousel-progressbar-left-navigation-container,
.carousel-progressbar-left-wrapper {
width: 50%;
}
@media screen and (max-width: 767px) {
.carousel-progressbar-left-container {
flex-direction: column-reverse;
row-gap: 24px;
}
.carousel-progressbar-left-navigation-container,
.carousel-progressbar-left-wrapper {
width: 100%;
}
} .carousel-progressbar-left-navigation-container {
display: flex;
align-items: flex-end;
}
.carousel-progressbar-left-navigation-container .navigation {
width: 100%;
padding-right: 100px;
}
.carousel-progressbar-left-navigation-container .navigation-arrows {
display: flex;
column-gap: 24px;
margin-bottom: 30px;
}
.carousel-progressbar-left-navigation-container .slide-arrow {
font-size: 30px;
display: inline-flex;
padding: 13px;
}
.carousel-progressbar-left-navigation-container .progress-bar-wrapper {
width: 100%;
height: 4px;
position: relative;
}
.carousel-progressbar-left-navigation-container .progress-bar {
position: absolute;
height: 4px;
left: 0;
transition: left 0.5s;
}
@media screen and (max-width: 1024px) {
.carousel-progressbar-left-navigation-container .navigation {
padding-right: 50px;
}
}
@media screen and (max-width: 767px) {
.carousel-progressbar-left-navigation-container .navigation {
padding-right: 0;
}
.carousel-progressbar-left-navigation-container .navigation-arrows {
justify-content: space-between;
}
} .carousel-progressbar-left-wrapper {
overflow: hidden;
}
.carousel-progressbar-left-wrapper .slides {
display: flex;
column-gap: 30px;
}
.carousel-progressbar-left-wrapper .slide {
flex-shrink: 0;
width: 416px;
max-width: 100%;
position: relative;
}
.carousel-progressbar-left-wrapper .slide .slidetitle-container {
position: absolute;
left: 30px;
bottom: 30px;
}
.carousel-progressbar-left-wrapper .slide .slidetitle {
width: fit-content;
}
.carousel-progressbar-left-wrapper .slide .slidetitle-first {
transition: margin 0.3s;
}
.carousel-progressbar-left-wrapper .slide .slidetitle-second {
transition: margin 0.3s;
margin-top: 10px;
}
.carousel-progressbar-left-wrapper .slide:hover .slidetitle-first {
margin: 0 0 0 20px;
}
.carousel-progressbar-left-wrapper .slide:hover .slidetitle-second {
margin: 10px 0 0 35px;
}
.carousel-progressbar-left-wrapper .slide .image {
width: 416px;
height: 495px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
transition: background-size 0.3s;
}
.carousel-progressbar-left-wrapper .slide:hover .image {
background-size: 120% 120%;
}