/* Style the main element as a flex container */
.hero {
    display: block;
    margin-bottom: 6vw;
    height: 56vw;
}
.cards-container {
    width: 80vw;
    margin: 4vw auto 3vw auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Style the card services */
.card {
    display: flex;
    flex-direction: column;
    flex-basis: calc(32.5% - 2vw);
    margin-bottom: 5vw;
    transition: 0.3s ease-in-out;
    overflow: hidden;
}
/*
.cards-container:last-child .card:last-child {
    margin: 0 auto 5vw auto;
}
*/

/* Style the card content */
.card h2 {
    margin-top: 1vw;
    font-size: 1.8vw;
}
.card p {
    margin: 0.5vw auto 0 auto;
    text-align: justify;
    /*font-size: 1.6vw;*/
}

.video-container {
    margin: -1vw auto 6vw auto;
}

@media screen and (max-width: 900px) {
    .cards-container {
        width: 85vw;
    }
    .card {
        flex-basis: calc(50% - 2vw);
        cursor: pointer;
    }
}

@media screen and (max-width: 600px) {
    .hero {
        height: 125vw;
    }
    .cards-container {
        width: 75vw;
    }
    .card {
        flex-basis: calc(100% - 0vw);
    }
    .card h2 {
        order: -1;
    }
    .card h2 {
        margin-top: 10vw;
        font-size: 5.8vw;
    }
    .card p {
        margin: 0.5vw auto 0 auto;
        text-align: justify;
        /*font-size: 3vw;*/
    }
    .video-container {
        margin: 10vw auto 6vw auto;
    }
}