/* RESPONSIVE TEXT */
/* https://robertcelt95.medium.com/responsive-typography-that-actually-works-beyond-font-size-clamp-acf592b79774 */

/* h1 { */
/* font-size: clamp(2rem, 5vw, 4rem); */
/* font-size: clamp(32px, calc(32px + (64 - 32) * ((100vw - 375px) / (1440 - 375))), 64px); */
/* color: red; */
/* } */

/* STEP 1 : Define Your Base Sizes */
:root {
    /* Mobile base */
    --font-size-base: 16px;
    
    /* Type scale using 1.25 ratio */
    --font-size-sm: 12.8px;   /* 16 ÷ 1.25 */
    --font-size-md: 16px;     /* base */
    --font-size-lg: 20px;     /* 16 × 1.25 */
    --font-size-xl: 25px;     /* 20 × 1.25 */
    --font-size-2xl: 31.25px; /* 25 × 1.25 */
    --font-size-3xl: 39.06px; /* 31.25 × 1.25 */
    --font-size-4xl: 48.83px; /* 39.06 × 1.25 */
}

/* STEP 2 : Step 2: Adjust at Breakpoints */
@media (min-width: 768px) {
    :root {
        --font-size-base: 18px; /* Slightly larger on tablets */
        --font-size-sm: 14.4px;
        --font-size-md: 18px;
        --font-size-lg: 22.5px;
        --font-size-xl: 28.13px;
        --font-size-2xl: 35.16px;
        --font-size-3xl: 43.95px;
        --font-size-4xl: 54.93px;
    }
}
@media (min-width: 1024px) {
    :root {
        --font-size-base: 18px; /* Same as tablet */
        /* Or adjust further if needed */
    }
}
}

 /* STEP 3 : Apply to Elements*/
 body {
     font-size: var(--font-size-md);
 }
 h1 { font-size: var(--font-size-4xl); color: red;}
 h2 { font-size: var(--font-size-3xl); }
 h3 { font-size: var(--font-size-2xl); }
 h4 { font-size: var(--font-size-xl); }
 h5 { font-size: var(--font-size-lg); }
 h6 { font-size: var(--font-size-md); }
 small { font-size: var(--font-size-sm); }

 h1 span , h2 span , h3 span , h4 span , h5 span , h6 span {
     font-style: italic;
 }