/* Only apply hover effects on devices that actually support hover */
@media (hover: hover) and (pointer: fine) {
    .blkymal:hover .ymal-excerpt {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Separate styles for touch devices */
@media (hover: none) and (pointer: coarse) {
    .blkymal.touch-active .ymal-excerpt {
        opacity: 1;
        transform: translateY(0);
    }
}
.sgr-ymal.v2 {
    /* Fix the anonymous slick inner wrapper */
}
.sgr-ymal.v2 .slick-slide > div {
    display: flex !important; /* allows child (your .col-12) to stretch */
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
}
.sgr-ymal.v2 {
    /* Make your main card stretch within */
}
.sgr-ymal.v2 .slick-slide .col-12.on-slider {
    height: 100%;
    width: 100%;
}
.sgr-ymal.v2 {
    /* Make sure figure and its image layers stretch properly */
}
.sgr-ymal.v2 .slick-slide figure.blkymal {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sgr-ymal.v2 {
    /* Optional: make background anchors fill the figure */
}
.sgr-ymal.v2 .slick-slide a.background-image {
    height: 100%;
    display: block;
    position: relative;
}