.rc-image-liste-widget{
display:grid;
grid-template-columns: 45% 1fr;
gap:40px;
align-items:stretch;
}
.rc-hover-images{
position:relative;
height:100%;
overflow:hidden;
}
.rc-hover-images img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transform:translateX(30px);
}
.rc-hover-images img.active{
opacity:1;
}
.rc-hover-images img.animate{
animation: rcFadeSlide 0.45s ease-out forwards;
}
@keyframes rcFadeSlide{
from{ opacity:0; transform:translateX(30px); }
to{ opacity:1; transform:translateX(0); }
}
.rc-image-liste-widget.rc-hide-image{ grid-template-columns:1fr !important; }
.rc-image-liste-widget.rc-hide-image .rc-hover-images{ display:none; }
.rc-hover-list{ border-top:1px solid #000; }
.rc-hover-item{
position:relative;
display:flex;
gap:20px;
padding:22px 0;
cursor:pointer;
text-decoration:none;
color:inherit;
}
.rc-hover-item::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:1px;
background:#000;
pointer-events:none;
}
.rc-num{ min-width:40px; font-weight:700; }
.rc-title{ font-weight:800; }
.rc-text{ margin:6px 0 0; }
.arrow-icon{
--icon-size: 40px;
width: var(--icon-size);
height: var(--icon-size);
display:inline-block;
margin-left:auto;
}
.arrow-icon svg{ width:100%; height:100%; }
.arrow-icon .bg{ transition: fill 0.3s ease; }
.arrow-icon .arrow{
transform-origin:center;
transform: rotate(-45deg);
transition: transform 0.35s ease;
}
.rc-hover-item:hover .arrow-icon .bg{ fill:#FFF127; }
.rc-hover-item:hover .arrow-icon .arrow{ transform: rotate(0deg); }
.rc-image-liste-placeholder{
padding:16px;
border:1px dashed #999;
font-size:14px;
}
@media (max-width:767px){
.rc-image-liste-widget{ grid-template-columns:1fr !important; gap:24px; }
.rc-hover-images{ height:auto; aspect-ratio:16/9; }
.rc-hover-images img{ position:absolute; }
}