@media screen {
    :root {
        --fs-1: 2.5rem;
        --fs-2: 2rem;
        --fs-3: 1.75rem;
        --fs-4: 1.5rem;
        --fs-5: 1.25rem;
        --fs-6: 1rem;
        --fs-7: 0.75rem; /* New font size */
        --fs-8: 0.65rem;
    }

    .fs-1 {
        font-size: var(--fs-1) !important;
    }

    .fs-2 {
        font-size: var(--fs-2) !important;
    }

    .fs-3 {
        font-size: var(--fs-3) !important;
    }

    .fs-4 {
        font-size: var(--fs-4) !important;
    }

    .fs-5 {
        font-size: var(--fs-5) !important;
    }

    .fs-6 {
        font-size: var(--fs-6) !important;
    }

    .fs-7 {
        font-size: var(--fs-7) !important;
    }

    .fs-8 {
        font-size: var(--fs-8) !important;
    }
    /* New class */


    /* Base font size */
    body {
        font-size: 15px; /* Default: 1rem = 15px */
    }

    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {
        body {
            font-size: 15.5px; /* Slightly larger; 1rem = 15.5px */
        }
    }

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {
        body {
            font-size: 16px; /* 1rem = 16px */
        }
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
        body {
            font-size: 16.5px; /* 1rem = 16.5px */
        }
    }

    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
        body {
            font-size: 17px; /* Larger; 1rem = 17px */
        }
    }

    /* XXL devices (larger desktops, 1400px and up) */
    @media (min-width: 1400px) {
        body {
            font-size: 17.5px; /* 1rem = 17.5px */
        }
    }
}