/* Responsive Design */
@media (max-width: 1200px) {
    .carousel-card {
        /* Auto carousel card */
        flex: 0 0 calc(33.333% - 10px);
    }

    .content-card {
        /* Manual carousel card */
        padding: 1.5rem;
    }

    .video-area {
        padding-right: 1.5rem;
    }

    .content-area h2 {
        font-size: 2rem;
    }

    .hero-card h1 {
        font-size: 3.5rem;
    }

    .hero-card p {
        font-size: 1.5rem;
    }
}

@media (max-width: 992px) {
    .carousel-card {
        /* Auto carousel card */
        flex: 0 0 calc(50% - 10px);
    }

    .hero-card {
        width: 70vw;
    }

    .hero-card h1 {
        font-size: 3rem;
    }

    .content-card {
        /* Manual carousel card */
        flex-direction: column;
        padding: 1rem;
        margin: 0 10px;
    }

    .video-area {
        flex: 0 0 40%;
        padding-right: 0;
        padding-bottom: 1rem;
        align-items: flex-start;
    }

    .content-area {
        flex: 1;
    }

    .video-placeholder {
        aspect-ratio: 16/9;
        max-width: 100%;
    }

    .carousel-arrow {
        /* Manual carousel arrows */
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    .carousel-arrow.prev {
        left: 2vw;
    }

    .carousel-arrow.next {
        right: 2vw;
    }
}

@media (max-width: 768px) {
    .carousel-card {
        /* Auto carousel card */
        flex: 0 0 calc(100% - 10px);
    }

    .hero-card {
        width: 80vw;
        height: auto;
        padding: 1.5rem;
    }

    .hero-card h1 {
        font-size: 2.5rem;
    }

    .hero-card p {
        font-size: 1.2rem;
    }

    .text-content {
        width: 85%;
    }

    .text-section h2 {
        font-size: 2rem;
    }

    .card-carousel-container {
        /* Manual carousel container */
        width: 90%;
    }

    .content-card {
        /* Manual carousel card */
        margin: 0 5px;
    }
}