.merlin-image-carousel {
margin: 3.5rem 0;
}
.merlin-image-carousel-viewport {
overflow: hidden;
width: 100%;
}
.merlin-image-carousel-track {
display: flex;
gap: 24px;
will-change: scroll-position;
}
.merlin-image-carousel-card {
flex: 0 0 25%;
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 12px 30px rgba(47, 84, 104, 0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.merlin-image-carousel-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 38px rgba(47, 84, 104, 0.18);
}
.merlin-image-carousel-photo {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: rgba(47, 84, 104, 0.08);
}
.merlin-image-carousel-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.merlin-image-carousel-card:hover .merlin-image-carousel-photo img {
transform: scale(1.04);
}
.merlin-image-carousel-placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(53, 177, 140, 0.22), rgba(47, 84, 104, 0.18));
}
.merlin-image-carousel-excerpt {
display: block;
padding: 18px 20px 20px;
font-size: 0.95rem;
line-height: 1.45;
min-height: 5.4em;
max-height: 5.4em;
overflow: hidden;
}
.merlin-image-carousel-footer {
margin-top: 1.2rem;
text-align: right;
}
.merlin-image-carousel-footer a {
color: #35b18c;
font-weight: 700;
text-decoration: none;
}
.merlin-image-carousel-footer a:hover {
color: #2f5468;
}
@media (max-width: 680px) {
.merlin-image-carousel {
margin: 2.8rem 0;
}
.merlin-image-carousel-track {
gap: 18px;
}
.merlin-image-carousel-excerpt {
padding: 16px 18px 18px;
}
.merlin-image-carousel-footer {
text-align: left;
}
}