/* create variables in format meckeys-blocks-font-size */

@media screen and (max-width: 800px) {
    :root {
        --meckeys-max-width: 90%;
    }
}

/* for mobile under 1021 */
@media screen and (min-width: 800px) and (max-width: 1000px) {
    :root {
        --meckeys-section-padding: 40px;
        --meckeys-max-width: 800px;
    }
}
/* add min width 1000px and max 1350 */
@media screen and (min-width: 1000px) and (max-width: 1350px) {
    :root {
        --meckeys-max-width: 1000px;
    }
}

@media (max-width: 600px) {
    :root {
        --meckeys-max-width: 90%;
        --meckeys-main-heading-fs: 5rem;
        --meckeys-h1-fs: 3.5rem; /* 68px */
        --meckeys-h2-fs: 2.5rem; /* 48px */
        --meckeys-h3-fs: 2rem; /* 36px */
        --meckeys-main-description-fs: 1.5rem; /* 24.2px */
    }
}