.blog-media-thumb {
    position: relative;
    display: inline-block;
    width: 227px; /* rectangle width */
    height: 127px; /* rectangle height */
    overflow: hidden;
    border-radius: 8px;
    background: #f8f9fa; /* fallback background */
}

    .blog-media-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* ensures consistent crop without stretching */
        display: block;
    }

.blog-video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    text-shadow: 0 0 10px rgba(0,0,0,0.7);
    pointer-events: none; /* so clicks go through */
}