.merlin-post-carousel {
width: 100%;
margin: 3rem auto;
}
.merlin-post-carousel-grid {
display: grid !important;
grid-template-columns: repeat(var(--merlin-post-carousel-visible, 4), minmax(0, 1fr)) !important;
gap: 24px !important;
width: 100% !important;
align-items: stretch !important;
}
.merlin-post-carousel-card {
position: relative;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
width: 100% !important;
height: 100% !important;
background: #f7f4ef !important;
color: #111111 !important;
text-decoration: none !important;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 14px 34px rgba(15, 38, 51, 0.22);
opacity: 1;
transform: translateY(0);
transition:
opacity 0.45s ease,
transform 0.45s ease,
box-shadow 0.25s ease;
}
.merlin-post-carousel-card.is-changing {
opacity: 0;
transform: translateY(8px);
}
.merlin-post-carousel-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 42px rgba(15, 38, 51, 0.28);
}
.merlin-post-carousel-image {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: rgba(47, 84, 104, 0.12);
}
.merlin-post-carousel-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
transition: transform 0.35s ease;
}
.merlin-post-carousel-card:hover .merlin-post-carousel-image img {
transform: scale(1.035);
}
.merlin-post-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-post-carousel-body {
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
min-height: 7.4em;
padding: 15px 18px 46px;
background: #f7f4ef;
}
.merlin-post-carousel-excerpt {
display: block;
font-size: 0.9rem;
line-height: 1.4;
color: #111111 !important;
text-decoration: none !important;
max-height: 4.2em;
overflow: hidden;
}
.merlin-post-carousel-more {
position: absolute;
left: 18px;
bottom: 16px;
display: inline-flex;
align-items: center;
gap: 0.35em;
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #35b18c;
}
.merlin-post-carousel-more::after {
content: "›";
font-size: 1.1rem;
line-height: 0;
transform: translateY(-1px);
}
.merlin-post-carousel-card:hover .merlin-post-carousel-more {
color: #2f5468;
}
@media (max-width: 1024px) {
.merlin-post-carousel-grid {
gap: 22px !important;
}
}
@media (max-width: 680px) {
.merlin-post-carousel-grid {
gap: 18px !important;
}
.merlin-post-carousel-body {
padding: 14px 16px 46px;
}
.merlin-post-carousel-more {
left: 16px;
}
}