/* -------------
    SOMMAIRE
------------- */

/*
    @AUTHOR : Nicolas BOUDOT

    PROPRIÉTÉ : FONT-SIZE
    Styles liés à la propriété font-size (.fz car .fs est déjà utilisé pour font-style)
*/

/*
    01 - XS
        Hn
        px / rem
    02 - SM
    03 - MD
    04 - LG
    05 - XL
    06 - XXL
*/



/* -----------------
    01 - XS
        Hn
----------------- */

.fz-h1 {
    font-size: var(--fz-h1);
}

.fz-h2 {
    font-size: var(--fz-h2);
}

.fz-h3 {
    font-size: var(--fz-h3);
}

.fz-h4 {
    font-size: var(--fz-h4);
}

.fz-h5 {
    font-size: var(--fz-h5);
}

.fz-h6 {
    font-size: var(--fz-h6);
}



/* -----------------
  02 - PX / REM
----------------- */

.fz-8px {
    font-size: .8rem;
}

.fz-9px {
    font-size: .9rem;
}

.fz-10px {
    font-size: 1rem;
}

.fz-11px {
    font-size: 1.1rem;
}

.fz-12px {
    font-size: 1.2rem;
}

.fz-14px {
    font-size: 1.4rem;
}

.fz-16px {
    font-size: 1.6rem;
}

.fz-18px {
    font-size: 1.8rem;
}

.fz-20px {
    font-size: 2rem;
}

.fz-22px {
    font-size: 2.2rem;
}

.fz-24px {
    font-size: 2.4rem;
}

.fz-30px {
    font-size: 3rem;
}

.fz-32px {
    font-size: 3.2rem;
}

.fz-34px {
    font-size: 3.4rem;
}

.fz-40px {
    font-size: 4rem;
}

.fz-57px {
    font-size: 5.7rem;
}

.fz-60px {
    font-size: 6rem;
}

.fz-100px {
    font-size: 10rem;
}

.fz-460px {
    font-size: 46rem;
}



/* -----------------
    02 - SM
        Hn
----------------- */

@media (min-width: 576px) {
    .fz-sm-h1 {
        font-size: var(--fz-h1);
    }

    .fz-sm-h2 {
        font-size: var(--fz-h2);
    }

    .fz-sm-h3 {
        font-size: var(--fz-h3);
    }

    .fz-sm-h4 {
        font-size: var(--fz-h4);
    }

    .fz-sm-h5 {
        font-size: var(--fz-h5);
    }

    .fz-sm-h6 {
        font-size: var(--fz-h6);
    }
}



/* -----------------
    02 - SM
        Pixels
----------------- */

@media (min-width: 576px) {
    .fz-sm-32px {
        font-size: 3.2rem;
    }

    .fz-sm-100px {
        font-size: 10rem;
    }
}



/* -----------------
    03 - MD
        Hn
----------------- */

@media (min-width: 768px) {
    .fz-md-h1 {
        font-size: var(--fz-h1);
    }

    .fz-md-h2 {
        font-size: var(--fz-h2);
    }

    .fz-md-h3 {
        font-size: var(--fz-h3);
    }

    .fz-md-h4 {
        font-size: var(--fz-h4);
    }

    .fz-md-h5 {
        font-size: var(--fz-h5);
    }

    .fz-md-h6 {
        font-size: var(--fz-h6);
    }
}



/* -----------------
    03 - MD
        Pixels
----------------- */

@media (min-width: 768px) {
    .fz-md-32px {
        font-size: 3.2rem;
    }

    .fz-md-100px {
        font-size: 10rem;
    }
}



/* -----------------
    04 - LG
        Hn
----------------- */

@media (min-width: 992px) {
    .fz-lg-h1 {
        font-size: var(--fz-h1);
    }

    .fz-lg-h2 {
        font-size: var(--fz-h2);
    }

    .fz-lg-h3 {
        font-size: var(--fz-h3);
    }

    .fz-lg-h4 {
        font-size: var(--fz-h4);
    }

    .fz-lg-h5 {
        font-size: var(--fz-h5);
    }

    .fz-lg-h6 {
        font-size: var(--fz-h6);
    }
}



/* -----------------
    04 - LG
        Pixels
----------------- */

@media (min-width: 992px) {
    .fz-lg-24px {
        font-size: 2.4rem;
    }

    .fz-lg-32px {
        font-size: 3.2rem;
    }

    .fz-lg-40px {
        font-size: 4rem;
    }

    .fz-lg-100px {
        font-size: 10rem;
    }
}



/* -----------------
    05 - XL
        Hn
----------------- */

@media (min-width: 1200px) {
    .fz-xl-h1 {
        font-size: var(--fz-h1);
    }

    .fz-xl-h2 {
        font-size: var(--fz-h2);
    }

    .fz-xl-h3 {
        font-size: var(--fz-h3);
    }

    .fz-xl-h4 {
        font-size: var(--fz-h4);
    }

    .fz-xl-h5 {
        font-size: var(--fz-h5);
    }

    .fz-xl-h6 {
        font-size: var(--fz-h6);
    }
}



/* -----------------
    05 - XL
        Pixels
----------------- */

@media (min-width: 1200px) {
    .fz-xl-32px {
        font-size: 3.2rem;
    }

    .fz-xl-100px {
        font-size: 10rem;
    }
}



/* -----------------
    06 - XXL
        Hn
----------------- */

@media (min-width: 1400px) {
    .fz-xxl-h1 {
        font-size: var(--fz-h1);
    }

    .fz-xxl-h2 {
        font-size: var(--fz-h2);
    }

    .fz-xxl-h3 {
        font-size: var(--fz-h3);
    }

    .fz-xxl-h4 {
        font-size: var(--fz-h4);
    }

    .fz-xxl-h5 {
        font-size: var(--fz-h5);
    }

    .fz-xxl-h6 {
        font-size: var(--fz-h6);
    }
}



/* -----------------
    06 - XXL
        Pixels
----------------- */

@media (min-width: 1400px) {
    .fz-xxl-32px {
        font-size: 3.2rem;
    }

    .fz-xxl-100px {
        font-size: 10rem;
    }
}