@media screen and (max-width: 866px) {

    /* title h2 */
    div.services-container h2 {
        font-size: 2em;
    }

}

@media screen and (max-width: 767px) {

    div.services-container h2 {
        font-size: 2em;
    }

    .banner-section {
        padding: 3rem var(--content-start);
    }
}

@media screen and (max-width: 661px) {

    div.services-container h2 {
        font-size: 1.8em;
    }
}

@media screen and (max-width: 613px) {

    div.services-container h2 {
        font-size: 1.5em;
    }

    div.services-container p {
        font-size: 1rem;
    }

}

@media screen and (max-width: 541px) {
    div.services-container p {
        font-size: 0.8rem;
    }

    section.services .cards li.card .card-footer {
        background-color: var(--primary);
    }

    section.services .cards li.card .card-footer p,
    section.services .cards li.card .card-content i {
        color: var(--asterone-black);
    }

    section.services .cards li.card .card-footer i {
        color: var(--primary);
    }

    section.services .cards li.card .card-footer::after {
        background-color: var(--asterone-black);
    }
}

@media screen and (max-width: 490px) {
    .banner-section {
        height: 40vh;
    }

    div.services-container {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 455px) {
    div.services-container h2 {
        font-size: 1em;
    }
}

@media screen and (max-width: 387px) {
    div.services-container p {
        font-size: 0.6rem;
    }
}

@media screen and (max-width: 347px) {
    .banner-section {
        height: 30vh;
    }

    div.services-container h2 {
        font-size: 1em;
    }

    div.services-container p {
        font-size: 0.5rem;
    }

}