Oxygen, Bricks, + Breakdance Framework Global Utility Class Presets + Variables

Welcome back to another resource post. Below is a list of pre-styled global utility classes and variables that you can use with your favorite WordPress page/website builder.

Updated on: 9th March 2025

Using what is known as ‘utility’ or ‘pre-defined’ classes, especially when working with page builders, can improve your workflow and help you achieve consistency in your web design projects.

Below, I’ve grouped some variables as well as classes/presets you might want to use for your projects. Feel free to copy and paste this into your code snippet and customize to your heart’s content. If you need to change something, such as the colors, fluid calculations, etc, you are welcome to do this.

How to use the global utility classes/presets?

Important: Using these will depend on the builder you are using. For example, Bricks has it’s own Variables Manager, as so does Oxygen 6.

Regardless, to use global utility classes/presets in your projects, create a new stylesheet or code snippet called 'Utilities + Vars' using a snippet plugin like WPCodeBox or Fluent Snippets. Use the snippets as instructed for each set below.

Video

Click below to learn how to use the Framework CSS with each page builder listed below –

1. How to use the Utility Classes in Bricks Builder
2. How to use the Utility Classes in Oxygen Builder
3. How to use the Utility Classes in Breakdance

What is the Block Element Modifier (BEM)

Here we are using BEM approach to naming some of the typography and width classes – Here is an example:

/* Block element 
-----*/
.btn {...}

/* Element that depends upon the block
-----*/ 
.btn__price {...}

/* Modifier that changes the style of the block
-----*/
.btn--light {...}
.btn--dark {...}
.btn--sml {...}
.btn--large {...}

Typography colors [VARs]

Here we can define the colors in our palette as well as transparent shades. For Bricks, add these to your Variables Manager. For Oxygen Classes, add them to your code snippet using a plugin as mentioned above.

/* PALETTE + TRANSPARENCY SHADES
------*/
:root {
--primary-5: rgba(82, 141, 230, 0.05);
--primary-10: rgba(82, 141, 230, 0.1);
--primary-20: rgba(82, 141, 230, 0.2);
--primary-30: rgba(82, 141, 230, 0.3);
--primary-40: rgba(82, 141, 230, 0.4);
--primary-50: rgba(82, 141, 230, 0.5);
--primary-60: rgba(82, 141, 230, 0.6);
--primary-70: rgba(82, 141, 230, 0.7);
--primary-80: rgba(82, 141, 230, 0.8);
--primary-90: rgba(82, 141, 230, 0.9);

--seccondary-5: rgba(24, 81, 112, 0.05);
--secondary-10: rgba(24, 81, 112, 0.1);
--secondary-20: rgba(24, 81, 112, 0.2);
--secondary-30: rgba(24, 81, 112, 0.3);
--secondary-40: rgba(24, 81, 112, 0.4);
--secondary-50: rgba(24, 81, 112, 0.5);
--secondary-60: rgba(24, 81, 112, 0.6);
--secondary-70: rgba(24, 81, 112, 0.7);
--secondary-80: rgba(24, 81, 112, 0.8);
--secondary-90: rgba(24, 81, 112, 0.9);

--bg-dark-5: rgba(0, 0, 0, 0.05);
--bg-dark-10: rgba(0, 0, 0, 0.1);
--bg-dark-20: rgba(0, 0, 0, 0.2);
--bg-dark-30: rgba(0, 0, 0, 0.3);
--bg-dark-40: rgba(0, 0, 0, 0.4);
--bg-dark-50: rgba(0, 0, 0, 0.5);
--bg-dark-60: rgba(0, 0, 0, 0.6);
--bg-dark-70: rgba(0, 0, 0, 0.7);
--bg-dark-80: rgba(0, 0, 0, 0.8);
--bg-dark-90: rgba(0, 0, 0, 0.9);

--bg-light-5: rgba(255, 255, 255, 0.05);
--bg-light-10: rgba(255, 255, 255, 0.1);
--bg-light-20: rgba(255, 255, 255, 0.2);
--bg-light-30: rgba(255, 255, 255, 0.3);
--bg-light-40: rgba(255, 255, 255, 0.4);
--bg-light-50: rgba(255, 255, 255, 0.5);
--bg-light-60: rgba(255, 255, 255, 0.6);
--bg-light-70: rgba(255, 255, 255, 0.7);
--bg-light-80: rgba(255, 255, 255, 0.8);
--bg-light-90: rgba(255, 255, 255, 0.9);

--background-body: rgb(25, 25, 25);
--text-body: rgb(152, 152, 152);
--text-heading: rgb(241, 241, 241);
}

Typography colors [Class Presets + VARs]

Please read the comment/notes for each set below –

/* Typography -- DO NOT COPY THIS PART - VISUAL REFERENCE ONLY FOR GUIDANCE
------
.hd--l1 -- heading light
.hd--l2 -- heading light (variant)
.hd--d1 -- heading dark
.hd--d2 -- heading dark (variant)

.txt--l1 -- text light
.txt--l2 -- text light (variant)
.txt--d1 -- text dark
.txt--d2 -- text dark (variant)

------DO NOT COPY */

/* TYPOGRAPHY CSS CLASS PRESETS -- COPY & PASTE THE PART BELOW
If you wish to use CSS class presets, the classes can be added and locked in Bricks Class Manager. The list below uses variables to style. You can assign variables in Bricks Variable Manager. Check out the link above if you are not familiar with using variables in Bricks. Variables and values is listed below the classes here.
------*/
.hd--l1 {color: var(--hd-l1);}
.hd--l2 {color: var(--hd-l2);}
.hd--d1 {color: var(--hd-d1);}
.hd--d2 {color: var(--hd-d2);}

.txt--l1 {color: var(--txt-l1);}
.txt--l2 {color: var(--txt-l2);}
.txt--d1 {color: var(--txt-d1);}
.txt--d2 {color: var(--txt-d2);}

/* VARIABLS FOR TYPOGRAPHY COLORS
Assign these variables into the variable manager in Bricks by clicking on the import option and paste the following. Add your own hexdecimal color codes. IMPORTANT: You do not need to write :root again. Just add the variables in an existing :root selector in your code snippet.
------*/
:root {
--hd-l1: #ffffff;
--hd-l2: #909090;
--hd-d1: #000000;
--hd-d2: #494949;

--txt-l1: #ffffff;
--txt-l2: #909090;
--txt-d1: #000000;
--txt-d2: #494949;
}

Fluid Spacing + Container width [VARs]

If you’re using Bricks, add the variables to your Variables Manager. If you’re using Oxygen, ensure that these are added to your code snippet first (WPCodeBox), then use the variables as you go along.

/* FLUID SPACING VARS: IMPORTANT - You DO NOT need to write :root again. Add these to an existing :root selector.
------*/
:root {
--space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
--space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
--space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
--space-xs: clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem);
--space-s: clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem);
--space-m: clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem);
--space-l: clamp(2rem, calc(1.81vw + 1.42rem), 3.96rem);
--space-xl: clamp(2.5rem, calc(2.87vw + 1.58rem), 5.6rem);
--space-2xl: clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem);
--space-3xl: clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem);
--space-4xl: clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem);

/* SCREEN CONTAINER WIDTHS */
--min-screen-width: 320px;
--max-screen-width: 1380px;
}

Grid, Col Layouts + Align, Widths [Class Presets]

Paste these inside your code snippet (WPCodeBox) and then use the classes inside of Bricks without styling. Make sure to lock the classes in Bricks too.

.row {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
}
.column {
    display: grid;
    grid-auto-flow: row;
    justify-items: start;
    align-content: start;
}
.columns-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.columns-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.columns-4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.columns-5 {
    display: grid;
    grid-template-columns: repeat(5,1fr);
}
.columns-6 {
    display: grid;
    grid-template-columns: repeat(6,1fr);
}
.columns-7 {
    display: grid;
    grid-template-columns: repeat(7,1fr);
}
.columns-8 {
    display: grid;
    grid-template-columns: repeat(8,1fr);
}
.columns-min-5 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(5rem, 1fr));
}
.columns-min-10 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(10rem, 1fr));
}
.columns-min-20 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr));
}
.columns-min-30 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr));
}
.columns-min-40 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr));
}
.columns-min-50 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(50rem, 1fr));
}
.columns-min-60 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(60rem, 1fr));
}
.columns-min-70 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(70rem, 1fr));
}
@media (max-width: 1400px) {
    .column--on-xl {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-xl {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }
    .columns-2--on-xl {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-xl {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-xl {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-xl {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-xl {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media (max-width: 992px) {
    .column--on-l {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-l {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }
    .columns-2--on-l {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-l {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-l {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-l {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-l {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media (max-width: 768px) {
    .column--on-m {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-m {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }
    .columns-2--on-m {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-m {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-m {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-m {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-m {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media (max-width: 480px) {
    .column--on-s {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-s {
        grid-template-columns: 1fr;
        grid-auto-flow: column;
    }
    .columns-2--on-s {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-s {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-s {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-s {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-s {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ALIGN ITEMS -- Add classes and set alignment inside of page builder.
------*/
.align-content--start {...}
.align-content--center {...}
.align-content--end {...}

/* SPACING + DEMENSIONS
--------*/
.width--100 {width: 100% !important;}
.width--90 {width: 90% !important;}
.width--80 {width: 80% !important;}
.width--70 {width: 70% !important;}
.width--60 {width: 60% !important;}
.width--50 {width: 50% !important;}
.width--40 {width: 40% !important;}
.width--30 {width: 30% !important;}
.width--20 {width: 20% !important;}
.width--10 {width: 10% !important;}
.vh--80 { height: 80vh !important; }
.vh--100 { height: 100vh !important; }

@media only screen and (max-width: 768px) {
    .width--90,
    .width--80,
    .width--70,
    .width--60,
    .width--50,
    .width--40,
    .width--30,
    .width--20,
    .width--10 {
        width: 100% !important;
    }
}
@media only screen and (max-width: 768px) {
   .vh--80 {
      height: 100vh !important;
   }
}

Fluid Typography [VARs]

Add and customize the calculation to your liking, or use as it is.

/* FLUID TYPOGRAPHY: IMPORTANT - You DO NOT need to write :root again. Add to your existing :root selector.
------*/
:root {
--text-xs: clamp(1.26rem, calc(-0.23vw + 1.34rem), 1.01rem);
--text-s: clamp(1.42rem, calc(-0.07vw + 1.44rem), 1.35rem);
--text-m: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem);
--text-l: clamp(1.8rem, calc(0.55vw + 1.62rem), 2.4rem);
--text-xl: clamp(2.02rem, calc(1.09vw + 1.68rem), 3.2rem);
--text-2xl: clamp(2.28rem, calc(1.84vw + 1.69rem), 4.26rem);
--text-3xl: clamp(2.56rem, calc(2.89vw + 1.64rem), 5.68rem);
--text-4xl: clamp(2.88rem, calc(4.34vw + 1.49rem), 7.58rem);
}

Complete CSS Framework!

If you are familiar with using a CSS framework and wish to have the complete template in a single file, here it is below. The code below is a complete framework, you do not need to copy any parts of the above.

Feel free to change the color palette, fluid clamp values, and more.

/* ==CSS==
@name           Page Builder General
@version        1.1.0
@description    Framework
@author         Fabrizio
@updated        March 2025
==/CSS== */

/* -- This setting available in Bricks Builder
html {
    font-size: 62.5%;
}
*/

:root {
    /* PALETTE + TRANSPARENCY SHADES */
    --primary-5: rgba(82, 141, 230, 0.05);
    --primary-10: rgba(82, 141, 230, 0.1);
    --primary-20: rgba(82, 141, 230, 0.2);
    --primary-30: rgba(82, 141, 230, 0.3);
    --primary-40: rgba(82, 141, 230, 0.4);
    --primary-50: rgba(82, 141, 230, 0.5);
    --primary-60: rgba(82, 141, 230, 0.6);
    --primary-70: rgba(82, 141, 230, 0.7);
    --primary-80: rgba(82, 141, 230, 0.8);
    --primary-90: rgba(82, 141, 230, 0.9);

    --seccondary-5: rgba(24, 81, 112, 0.05);
    --secondary-10: rgba(24, 81, 112, 0.1);
    --secondary-20: rgba(24, 81, 112, 0.2);
    --secondary-30: rgba(24, 81, 112, 0.3);
    --secondary-40: rgba(24, 81, 112, 0.4);
    --secondary-50: rgba(24, 81, 112, 0.5);
    --secondary-60: rgba(24, 81, 112, 0.6);
    --secondary-70: rgba(24, 81, 112, 0.7);
    --secondary-80: rgba(24, 81, 112, 0.8);
    --secondary-90: rgba(24, 81, 112, 0.9);

    --bg-dark-5: rgba(0, 0, 0, 0.05);
    --bg-dark-10: rgba(0, 0, 0, 0.1);
    --bg-dark-20: rgba(0, 0, 0, 0.2);
    --bg-dark-30: rgba(0, 0, 0, 0.3);
    --bg-dark-40: rgba(0, 0, 0, 0.4);
    --bg-dark-50: rgba(0, 0, 0, 0.5);
    --bg-dark-60: rgba(0, 0, 0, 0.6);
    --bg-dark-70: rgba(0, 0, 0, 0.7);
    --bg-dark-80: rgba(0, 0, 0, 0.8);
    --bg-dark-90: rgba(0, 0, 0, 0.9);

    --bg-light-5: rgba(255, 255, 255, 0.05);
    --bg-light-10: rgba(255, 255, 255, 0.1);
    --bg-light-20: rgba(255, 255, 255, 0.2);
    --bg-light-30: rgba(255, 255, 255, 0.3);
    --bg-light-40: rgba(255, 255, 255, 0.4);
    --bg-light-50: rgba(255, 255, 255, 0.5);
    --bg-light-60: rgba(255, 255, 255, 0.6);
    --bg-light-70: rgba(255, 255, 255, 0.7);
    --bg-light-80: rgba(255, 255, 255, 0.8);
    --bg-light-90: rgba(255, 255, 255, 0.9);

    --background-body: rgb(25, 25, 25); /* Background color for website */
    --text-body: rgb(152, 152, 152); /* Text color */
    --text-heading: rgb(241, 241, 241); /* Heading color */

    /* FLUID SPACING */
    --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
    --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
    --space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
    --space-xs: clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem);
    --space-s: clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem);
    --space-m: clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem);
    --space-l: clamp(2rem, calc(1.81vw + 1.42rem), 3.96rem);
    --space-xl: clamp(2.5rem, calc(2.87vw + 1.58rem), 5.6rem);
    --space-2xl: clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem);
    --space-3xl: clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem);
    --space-4xl: clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem);

    /* FLUID TYPOGRAPHY */
    --text-xs: clamp(1.26rem, calc(-0.23vw + 1.34rem), 1.01rem);
    --text-s: clamp(1.42rem, calc(-0.07vw + 1.44rem), 1.35rem);
    --text-m: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem);
    --text-l: clamp(1.8rem, calc(0.55vw + 1.62rem), 2.4rem);
    --text-xl: clamp(2.02rem, calc(1.09vw + 1.68rem), 3.2rem);
    --text-2xl: clamp(2.28rem, calc(1.84vw + 1.69rem), 4.26rem);
    --text-3xl: clamp(2.56rem, calc(2.89vw + 1.64rem), 5.68rem);
    --text-4xl: clamp(2.88rem, calc(4.34vw + 1.49rem), 7.58rem);

    /* FLUID BORDER RADIUS + BORDER */
    --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --radius-s: clamp(0.6rem, calc(-0.19vw + 0.86rem), 0.8rem);
    --radius-m: clamp(0.8rem, calc(-0.19vw + 1.06rem), 1rem);
    --radius-l: clamp(1.6rem, calc(-0.37vw + 2.12rem), 2rem);
    --radius-fl: clamp(2.6rem, calc(-0.56vw + 3.38rem), 3.2rem);
    --border-5: 5px;
    --border-10: 10px;
    --border-15: 15px;

    /* SCREEN CONTAINER WIDTHS */
    --min-screen-width: 320px;
    --max-screen-width: 1380px; /* Add this variable to your container width */
}

.row {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
}
.column {
    display: grid;
    grid-auto-flow: row;
    justify-items: start;
    align-content: start;
}
.columns-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.columns-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.columns-4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.columns-5 {
    display: grid;
    grid-template-columns: repeat(5,1fr);
}
.columns-6 {
    display: grid;
    grid-template-columns: repeat(6,1fr);
}
.columns-7 {
    display: grid;
    grid-template-columns: repeat(7,1fr);
}
.columns-8 {
    display: grid;
    grid-template-columns: repeat(8,1fr);
}
.columns-min-5 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(5rem, 1fr));
}
.columns-min-10 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(10rem, 1fr));
}
.columns-min-20 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr));
}
.columns-min-30 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr));
}
.columns-min-40 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr));
}
.columns-min-50 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(50rem, 1fr));
}
.columns-min-60 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(60rem, 1fr));
}
.columns-min-70 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(70rem, 1fr));
}
@media (max-width: 1400px) {
    .column--on-xl {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-xl {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }
    .columns-2--on-xl {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-xl {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-xl {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-xl {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-xl {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media (max-width: 992px) {
    .column--on-l {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-l {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }
    .columns-2--on-l {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-l {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-l {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-l {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-l {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media (max-width: 768px) {
    .column--on-m {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-m {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }
    .columns-2--on-m {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-m {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-m {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-m {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-m {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media (max-width: 480px) {
    .column--on-s {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .row--on-s {
        grid-template-columns: 1fr;
        grid-auto-flow: column;
    }
    .columns-2--on-s {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-3--on-s {
        grid-template-columns: repeat(3, 1fr);
    }
    .columns-4--on-s {
        grid-template-columns: repeat(4, 1fr);
    }
    .columns-5--on-s {
        grid-template-columns: repeat(5, 1fr);
    }
    .columns-6--on-s {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* SPACING + DEMENSIONS
--------*/
.width--100 {width: 100% !important;}
.width--90 {width: 90% !important;}
.width--80 {width: 80% !important;}
.width--70 {width: 70% !important;}
.width--60 {width: 60% !important;}
.width--50 {width: 50% !important;}
.width--40 {width: 40% !important;}
.width--30 {width: 30% !important;}
.width--20 {width: 20% !important;}
.width--10 {width: 10% !important;}
.vh--80 { height: 80vh !important; }
.vh--100 { height: 100vh !important; }

@media only screen and (max-width: 768px) {
    .width--90,
    .width--80,
    .width--70,
    .width--60,
    .width--50,
    .width--40,
    .width--30,
    .width--20,
    .width--10 {
        width: 100% !important;
    }
}
@media only screen and (max-width: 768px) {
   .vh--80 {
      height: 100vh !important;
   }
}