:root {
    --xsm: 300px;
    --xs: 600px;
    --sm: 780px;
    --md: 992px;
    --lg: 1040px;
    --xl: 1200px;
    --xxl: 1400px;
}

/* ------- MIN-WIDTH MEDIA QUERIES ------- */

@media screen and (min-width: var(--xsm)) {
    /* xsmmin content goes here */
}

@media screen and (min-width: var(--xs)) {
    /* xsmin content */
}

@media screen and (min-width: var(--sm)) {
    /* smmin content */
}

@media screen and (min-width: var(--md)) {
    /* mdmin content */
}

@media screen and (min-width: var(--lg)) {
    /* lgmin content */
}

@media screen and (min-width: var(--xl)) {
    /* xlmin content */
}

@media screen and (min-width: var(--xxl)) {
    /* xxlmin content */
}

/* ------- MAX-WIDTH MEDIA QUERIES ------- */

@media screen and (max-width: var(--xl)) {
    /* xlmax content */
}

@media screen and (max-width: var(--xxl)) {
    /* xxlmax content */
}

@media screen and (max-width: var(--lg)) {
    /* lgmax content */
}

@media screen and (max-width: var(--md)) {
    /* mdmax content */
}

@media screen and (max-width: var(--sm)) {
    /* smmax content */
}

@media screen and (max-width: var(--xs)) {
    /* xsmax content */
}

@media screen and (max-width: var(--xsm)) {
    /* xsmmax content */
}