@media screen and (max-width: 900px) {
    div.top-section-content {
        padding: 0 var(--content-start);
    }
}

@media screen and (max-width: 870px) {
    div.top-section-content h1 {
        font-size: 5em;
    }
}

@media screen and (max-width: 780px) {
    div.top-section-content p {
        font-size: 1.5em;
    }

    section.middle-section div.card-container {
        gap: 0;
    }
}

@media screen and (max-width: 650px) {
    div.top-section-content h1 {
        font-size: 4em;
    }

    section.middle-section div.card-container {
        flex-direction: column;
        text-align: center;
    }
}

@media screen and (max-width: 440px) {
    div.top-section-content h1 {
        font-size: 2.2em;
        text-align: center;
    }

    div.top-section-content p {
        font-size: 1em;
    }

    div.card-container img {
        max-width: 10em;
    }

    div.card-container div.card-content h2 {
        font-size: 1.3em;
    }
}