.media-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.media-card--video {
    background: #ffffff;
    min-height: 400px;
}

.media-card--image {
    background: #ffffff;
    min-height: 400px; 
}

.media-card--empty {
    background: #ffffff;
}

.media-card__video-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit; 
}

.media-card__click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 5;
    background: transparent;
}

.media-card__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* Ratio 16:9 */
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none; 
}

.media-card__image {
    width: 100%;
    height: 100%;
    min-height: inherit; 
    object-fit: cover;
}

img.media-card__image {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

@media (max-width: 1280px) {
    .media-card--cta {
        min-height: 500px;
    }
    
    .media-card__cta-content {
        padding: 24px;
        gap: 12px;
    }
    
    .media-card__cta-title {
        font-size: 20px;
        line-height: normal;   
    }
    
    .media-card__cta-text {
        font-size: 14px;
    }
}

@media (max-width: 1024px) {
    .media-card--video {
        min-height: 450px; 
        width: 100%;
    }
    
    .media-card--slider {
        min-height: 450px;
        width: 100%;
    }
    
    .media-card--cta {
        min-height: 450px;
    }
    
    .media-card__cta-content {
        padding: 20px;
        gap: 14px;
    }
    
    .media-card__cta-title {
        font-size: 18px;
    }
    
    .media-card__video {
        width: 300vw;      
        height: 168.75vw;  
    }
}

@media (max-width: 768px) {
    .media-card--slider {
        min-height: 300px;
    }
    
    .media-card--cta {
        min-height: 300px;
    }
    
    .media-card-carousel .carousel-prev,
    .media-card-carousel .carousel-next {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .media-card-carousel .carousel-prev {
        left: 10px;
    }
    
    .media-card-carousel .carousel-next {
        right: 10px;
    }
    
    .media-card-carousel .carousel-indicators {
        bottom: 15px;
    }
    
    .media-card-carousel .carousel-indicator {
        width: 10px;
        height: 10px;
    }
    
    .media-card__cta-content {
        padding: 16px;
        gap: 12px;
    }
    
    .media-card__cta-title {
        font-size: 16px;
    }
    
    .media-card__cta-text {
        font-size: 12px;
    }
    
    .media-card__cta-button {
        padding: 10px 20px;
        font-size: 12px;
    }
}