:root {
    /* Default breakpoint variables - Can't actually use these in vanilla CSS */
    --breakpoint-small-mobile: 320px;
    --breakpoint-mobile: 480px;
    --breakpoint-small-tablet: 768px;
    --breakpoint-small-wide-tablet: 880px;
    --breakpoint-small-laptop: 1024px;
    --breakpoint-medium-tablet: 1200px;
    --breakpoint-large-tablet: 1400px;
    --breakpoint-medium-laptop: 1600px;
    --breakpoint-HD: 1920px;
    --breakpoint-2K: 2560px;
    --breakpoint-4K: 3840px;

    /* Static variables - These don't change with breakpoints */
    --border-radius: 6px;
    --icon-size: 2rem;
    --triangle-size: 0.4rem;

    /* Add your responsive variables here */
    --site-width: 1400px;

    /* Width variable */
    --twenty-five-percent-unset-on-small-tablet: 25%;
    --twenty-five-percent-unset-on-small-laptop: 25%;
    --fifty-percent-unset-on-small-tablet: 50%;
    --adaptive-font-size: 1rem;
    --adaptive-icon-size: var(--icon-size);

    /* Height variables */
    --header__top-height: 3.5rem;
    --header__bottom-height: 5.5rem;

    /* Layout variables */
    --top-header-justify: center;
    --row-small-tablet-column: row;
    --row-small-wide-tablet-column: row;

    /* Display variables */
    --flex-hide-on-small-tablet: flex;
    --flex-hide-on-mobile: flex;
    --flex-show-on-small-wide-tablet: none;
}

/** Sizes above HD go first and take least precedence in cascade **/
/* HD - 1920px and up */
@media (min-width: 1920px) {
    :root {
        /* Add variables for HD here */
    }
}

/* 2K - 2560px and up */
@media (min-width: 2560px) {
    :root {
        /* Add variables for 2K here */
    }
}

/* 4K - 3840px and up */
@media (min-width: 3840px) {
    :root {
        /* Add variables for 4K here */
    }
}

/** Sizes below HD go last and take most precedence in cascade **/
/* Medium Laptop - 1600px and up */
@media (max-width: 1919px) {
    :root {
        /* Add variables for medium laptop here */
    }
}


/* Large Tablet - 1400px and below */
@media (max-width: 1400px) {
    :root {
        /* Add variables for large tablet here */
    }
}

/* Medium Tablet - 1200px and below */
@media (max-width: 1200px) {
    :root {
        /* Add variables for medium tablet here */
    }
}

/* Small Laptop - 1024px and below */
@media (max-width: 1024px) {
    :root {
        /* Add variables for small laptop here */
        --twenty-five-percent-unset-on-small-laptop: unset;
        --twenty-five-percent-unset-on-small-tablet: 35%;
    }
}

/* Small Wide Tablet - 880px and below */
@media (max-width: 880px) {
    :root {
        /* Add variables for small wide tablet here */
        --row-small-wide-tablet-column: column;
        --header__top-height: 2rem;
        --header__bottom-height: 4.5rem;
        --adaptive-font-size: 0.7rem;
        --adaptive-icon-size: 1rem;
        --top-header-justify: space-between;
        --flex-show-on-small-wide-tablet: flex;
    }
}

/* Small Tablet - 768px and below */
@media (max-width: 768px) {
    :root {
        /* Add variables for small tablet here */
        --twenty-five-percent-unset-on-small-tablet: unset;
        --fifty-percent-unset-on-small-tablet: unset;
        --flex-hide-on-small-tablet: none;
        --row-small-tablet-column: column;
    }
}

/* Mobile - 480px and below */
@media (max-width: 480px) {
    :root {
        /* Add variables for mobile here */
        --flex-hide-on-mobile: none;
        --top-header-justify: flex-end;
    }
}

/* Small Mobile - 320px and below */
@media (max-width: 320px) {
    :root {
        /* Add variables for small mobile here */
    }
}