:root {

    /**Colors*/
    --mainWhite: #FFFFFF;
    --mainRed: #C8102E;
    --textColor: #F9F9F9;
    --copyrightColor: #9095A1;

    /**Backgrounds*/
    --b-groundColor: #000000;
    --textB-groundColor: #565D6D;

    /**Fonts*/
    --font: "Open Sans", sans-serif;
    --textFontSize: 14px;
    --navFontSize: 18px;
    --h1FontSize: 48px;
    --h1FontWeight: 700;
    --h2FontSize: 32px;
    --h2FontWeight: 500;
    --h3FontSize: 20px;
    --h3FontWeight: 400;
    --moreFontSize: 24px;
    --moreFontWeight: 500;
    --paginationFontSize: 18px;
    --paginationFontWeight: 400;

    /**Gaps and paddings*/
    --blockSeparatorGap: 100px;
    --inBlockGap: 25px;
    --cardGap: 35px;
    --footer_cardDataGap: 15px;
    --menuGap: 60px;

    /**Borders and radiuses*/

    --cardBorder: 1px solid var(--mainRed);
    --cardBorderRadius: 10px;
    --buttonBorder: 1px solid var(--mainWhite);
    --buttonBorderRadius: 8px;

    /**Gallery Margins */
    --gallery-margin-top: 3rem;
    --gallery-margin-bottom: 3rem;
}


@media (min-width: 768px) and (max-width: 992px) {
    :root {
        /**Fonts*/
        --textFontSize: 13px;
        --navFontSize: 16px;
        --h1FontSize: 40px;
        --h2FontSize: 28px;
        --h3FontSize: 18px;
        --moreFontSize: 20px;
        --paginationFontSize: 16px;

        /**Gaps and paddings*/
        --blockSeparatorGap: 80px;
        --inBlockGap: 20px;
        --cardGap: 30px;
        --footer_cardDataGap: 12px;
        --menuGap: 50px;

        /* Gallery Margins */
        --gallery-margin-top: 2rem;
        --gallery-margin-bottom: 1.5rem;
    }
}

@media (min-width: 200px) and (max-width: 767px) {
    :root {
        /**Fonts*/
        --textFontSize: 12px;
        --navFontSize: 14px;
        --h1FontSize: 32px;
        --h2FontSize: 24px;
        --h3FontSize: 16px;
        --moreFontSize: 18px;
        --paginationFontSize: 14px;

        /**Gaps and paddings*/
        --blockSeparatorGap: 60px;
        --inBlockGap: 15px;
        --cardGap: 20px;
        --footer_cardDataGap: 10px;
        --menuGap: 40px;

        /**Gallery Margins */
        --gallery-margin-top: 0.5rem;
        --gallery-margin-bottom: 0.5rem;
    }
}

@media (min-width: 1024px) and (max-width: 1025px) {
    :root {
        --gallery-margin-top: 1.5rem;
        --gallery-margin-bottom: 1rem;
    }
}