.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; }
}