section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_items {
display:flex;
gap: 21px;
} section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item {
flex: 1;
transition: flex 300ms ease;
cursor: pointer;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item.active {
flex: 5;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content {
position: relative;
height: 700px;
border-radius: 20px;
overflow: hidden;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 75%;
background: linear-gradient(to top, rgba(55,64,82,.7), rgba(55,64,82,.5) 25%, rgba(55,64,82,.4) 50%, transparent 100%);
z-index: 2;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item.active .m46_accordion_horizontal_video_bild_item_content:after {
display: none;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content img.coverimg{
object-position: 42%;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content_link {
position: absolute;
right: 45px;
bottom: 45px;
transition: opacity .4s;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item:not(.active) .m46_accordion_horizontal_video_bild_item_content_link {
opacity: 0;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content_title {
position: absolute;
left: 40px;
bottom: 60px;
color: #fff;
writing-mode: vertical-lr;
text-transform: uppercase;
font-family: 'Nexa-Heavy', sans-serif;
z-index: 3;
transition: opacity .4s, padding .4s;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item:hover .m46_accordion_horizontal_video_bild_item_content_title {
padding-bottom: 78px;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item.active .m46_accordion_horizontal_video_bild_item_content_title {
opacity: 0;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content_title:before {
content: '';
position: absolute;
bottom: 0;
left: 4px;
width: 2px;
height: 0;
background: #fff;
margin-left: 10px;
transition: height .4s;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item:hover .m46_accordion_horizontal_video_bild_item_content_title:before {
height: 64px;
}
@media all and (min-width: 1850px) {
section.m46_accordion_horizontal_video_bild .mM_container[data-container="container"] {
max-width: 1579px;
}
}
@media all and (min-width: 1921px) {
section.m46_accordion_horizontal_video_bild .mM_container[data-container="container"] {
max-width: 1683px;
}
}
@media all and (min-width: 2200px) {
section.m46_accordion_horizontal_video_bild .mM_container[data-container="container"] {
max-width: 2078px;
}
}
@media all and (max-width: 1599px) {
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content {
height: 600px;
}
}
@media all and (max-width: 1399px) {
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content {
height: 500px;
}
}
@media all and (max-width: 991px) {
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content {
height: 400px;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content_title {
left: 28px;
}
}
@media (max-width: 767px){
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_items{
flex-direction: column;
gap: 10px;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item{
flex: initial;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content{
height: 106px;
transition: height .4s ease;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item.active .m46_accordion_horizontal_video_bild_item_content{
height: 500px;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content_title {
writing-mode: initial;
bottom: 11px;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item:hover .m46_accordion_horizontal_video_bild_item_content_title {
padding-bottom: 0;
padding-left: 63px;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content_title:before {
bottom: 14px;
left: 0;
width: 0;
height: 1px;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item:hover .m46_accordion_horizontal_video_bild_item_content_title:before {
height: 1px;
width: 44px;
}
}
@media all and (max-width: 575px) {
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item.active .m46_accordion_horizontal_video_bild_item_content{
height: 390px;
}
}
@media all and (max-width: 375px) {
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item.active .m46_accordion_horizontal_video_bild_item_content{
height: 300px;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content_link {
position: absolute;
right: 20px;
bottom: 20px;
}
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item_content_link a {
font-size: .9rem;
}
}
@media all and (max-width: 300px) {
section.m46_accordion_horizontal_video_bild .m46_accordion_horizontal_video_bild_item.active .m46_accordion_horizontal_video_bild_item_content{
height: 250px;
}
}