:root {
    --section-top-padding: 64px;
    --padding: 30px;
    --title-size: 22px;
    --bubble-size: 14vw;
    --text-width: 45%;
}

@media (max-width: 1400px) {
    :root {
        --section-top-padding: 60px;
        --padding: 26px;
        --text-width: 48%;
    }
}

@media (max-width: 1200px) {
    :root {
        --section-top-padding: 56px;
        --padding: 22px;
        --title-size: 20px;
        --bubble-size: 16vw;
        --text-width: 52%;
    }
}

@media (max-width: 1024px) {
    :root {
        --section-top-padding: 52px;
        --padding: 18px;
        --title-size: 18px;
        --text-width: 56%;
    }
}

@media (max-width: 992px) {
    :root {
        --section-top-padding: 48px;
        --padding: 16px;
        --title-size: 16px;
        --text-width: 60%;
    }
}

@media (max-width: 768px) {
    :root {
        --bubble-size: 18vw;
    }
}

@media (max-width: 640px) {
    :root {
        --section-top-padding: 44px;
        --padding: 14px;
        --title-size: 14px;
        --text-width: 62%;
    }
}

@media (max-width: 520px) {
    :root {
        --section-top-padding: 40px;
        --padding: 12px;
        --title-size: 13px;
        --text-width: 66%;
    }
}

@media (max-width: 320px) {
    :root {
        --section-top-padding: 32px;
        --padding: 8px;
        --title-size: 12px;
        --text-width: 70%;
    }
}