/* 
Responsive Attributes
By Matthew James Taylor

Full documentation:
https://matthewjamestaylor.com/responsive-attributes
*/

:root {
    /* padding */
    --pad: calc(8px + 1.5625vw);
    --pad2: calc(var(--pad) * 2);

    /* gutters */
    --gap: calc(8px + 1.5625vw);
    --gap2: calc(var(--gap) * 2);
}

/* Mobile rules */
@media (min-width: 0px) {
    /* default to one column */
    [data-xs*="column"] {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0;
    }
        
    /* remove leading/trailing margins on columns */
    [data-xs*="column"] > * {
        margin: 0;
    }

    /* remove leading/trailing margins on content within columns */
    [data-xs*="column"] > * > :first-child {
        margin-top: 0;
    }
    [data-xs*="column"] > * > :last-child {
        margin-bottom: 0;
    }
    
    /* padding */
    [data-xs~="pad"] {
        padding: var(--pad);
    }
    [data-xs~="pad2"] {
        padding: var(--pad2);
    }

    [data-xs] > [data-xs~="noPad"],
    [data-xs~="noPad"] {
        padding: 0;
    }

    [data-xs~="childPad"] > * {
        padding: var(--pad);
    }
    [data-xs~="childPad2"] > * {
        padding: var(--pad2);
    }

    /* gutter */
    [data-xs~="gap"] {
        gap: var(--gap);
    }
    [data-xs~="gap2"] {
        gap: var(--gap2);
    }

    [data-xs] > [data-xs~="noGap"],
    [data-xs~="noGap"] {
        gap: 0;
    }

    /* columns */
    [data-xs~="1column"] {
        grid-template-columns: repeat(1, 1fr);
    }
	[data-xs~="2column"] {
        grid-template-columns: repeat(2, 1fr);
    }
	[data-xs~="3column"] {
        grid-template-columns: repeat(3, 1fr);
    }
	[data-xs~="4column"] {
        grid-template-columns: repeat(4, 1fr);
    }
	[data-xs~="5column"] {
        grid-template-columns: repeat(5, 1fr);
    }
	[data-xs~="6column"] {
        grid-template-columns: repeat(6, 1fr);
    }
	[data-xs~="7column"] {
        grid-template-columns: repeat(7, 1fr);
    }
	[data-xs~="8column"] {
        grid-template-columns: repeat(8, 1fr);
    }

    /* column spans */
    [data-xs~="colSpan2"] {
        grid-column: span 2;
    }
	[data-xs~="colSpan3"] {
        grid-column: span 3;
    }
	[data-xs~="colSpan4"] {
        grid-column: span 4;
    }
	[data-xs~="colSpan5"] {
        grid-column: span 5;
    }
	[data-xs~="colSpan6"] {
        grid-column: span 6;
    }
	[data-xs~="colSpan7"] {
        grid-column: span 7;
    }
	[data-xs~="colSpan8"] {
        grid-column: span 8;
    }

    /* row spans */
    [data-xs~="rowSpan2"] {
		grid-row: span 2;
    }
	[data-xs~="rowSpan3"] {
		grid-row: span 3;
    }
	[data-xs~="rowSpan4"] {
		grid-row: span 4;
    }
	[data-xs~="rowSpan5"] {
		grid-row: span 5;
    }
	[data-xs~="rowSpan6"] {
		grid-row: span 6;
    }
	[data-xs~="rowSpan7"] {
		grid-row: span 7;
    }
	[data-xs~="rowSpan8"] {
		grid-row: span 8;
    }

    /* order */
    [data-xs~="order1"] {
        order: -8;
    }
	[data-xs~="order2"] {
        order: -7;
    }
	[data-xs~="order3"] {
        order: -6;
    }
	[data-xs~="order4"] {
        order: -5;
    }
	[data-xs~="order5"] {
        order: -4;
    }
	[data-xs~="order6"] {
        order: -3;
    }
	[data-xs~="order7"] {
        order: -2;
    }
	[data-xs~="order8"] {
        order: -1;
    }

    /* horizontal align */
    [data-xs~="left"] {
        justify-self: start;
    }
    [data-xs~="center"] {
        justify-self: center;
    }
    [data-xs~="right"] {
        justify-self: end;
    }
    [data-xs~="noHA"] {
        justify-self: unset;
    }

    /* vertical align */
    [data-xs~="top"] {
        align-self: start;
    }
    [data-xs~="middle"] {
        align-self: center;
    }
    [data-xs~="bottom"] {
        align-self: end;
    }
    [data-xs~="noVA"] {
        align-self: unset;
    }

    /* text align */
    [data-xs~="textL"] {
        text-align: left;
    }
    [data-xs~="textC"] {
        text-align: center;
    }
    [data-xs~="textR"] {
        text-align: right;
    }
    [data-xs~="noTA"] {
        text-align: unset;
    }

    /* hide element */
    [data-xs*="hide"] {
        display: none;
    }

    /* show element */
    [data-xs*="show"] {
        display: block;
    }

    /* responsive image */
    [data-xs*="rspImg"] {
        height: auto;
        width: 100%;
    }
}

/* Tablet rules */
@media (min-width: 600px) {
    /* default to one column */
    [data-sm*="column"] {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0;
    }
        
    /* remove leading/trailing margins on columns */
    [data-sm*="column"] > * {
        margin: 0;
    }

    /* remove leading/trailing margins on content within columns */
    [data-sm*="column"] > * > :first-child {
        margin-top: 0;
    }
    [data-sm*="column"] > * > :last-child {
        margin-bottom: 0;
    }
    
    /* padding */
    [data-sm~="pad"] {
        padding: var(--pad);
    }
    [data-sm~="pad2"] {
        padding: var(--pad2);
    }

    [data-sm] > [data-sm~="noPad"],
    [data-sm~="noPad"] {
        padding: 0;
    }

    [data-sm~="childPad"] > * {
        padding: var(--pad);
    }
    [data-sm~="childPad2"] > * {
        padding: var(--pad2);
    }

    /* gutter */
    [data-sm~="gap"] {
        gap: var(--gap);
    }
    [data-sm~="gap2"] {
        gap: var(--gap2);
    }

    [data-sm] > [data-sm~="noGap"],
    [data-sm~="noGap"] {
        gap: 0;
    }

    /* columns */
    [data-sm~="1column"] {
        grid-template-columns: repeat(1, 1fr);
    }
	[data-sm~="2column"] {
        grid-template-columns: repeat(2, 1fr);
    }
	[data-sm~="3column"] {
        grid-template-columns: repeat(3, 1fr);
    }
	[data-sm~="4column"] {
        grid-template-columns: repeat(4, 1fr);
    }
	[data-sm~="5column"] {
        grid-template-columns: repeat(5, 1fr);
    }
	[data-sm~="6column"] {
        grid-template-columns: repeat(6, 1fr);
    }
	[data-sm~="7column"] {
        grid-template-columns: repeat(7, 1fr);
    }
	[data-sm~="8column"] {
        grid-template-columns: repeat(8, 1fr);
    }

    /* column spans */
    [data-sm~="colSpan2"] {
        grid-column: span 2;
    }
	[data-sm~="colSpan3"] {
        grid-column: span 3;
    }
	[data-sm~="colSpan4"] {
        grid-column: span 4;
    }
	[data-sm~="colSpan5"] {
        grid-column: span 5;
    }
	[data-sm~="colSpan6"] {
        grid-column: span 6;
    }
	[data-sm~="colSpan7"] {
        grid-column: span 7;
    }
	[data-sm~="colSpan8"] {
        grid-column: span 8;
    }

    /* row spans */
    [data-sm~="rowSpan2"] {
		grid-row: span 2;
    }
	[data-sm~="rowSpan3"] {
		grid-row: span 3;
    }
	[data-sm~="rowSpan4"] {
		grid-row: span 4;
    }
	[data-sm~="rowSpan5"] {
		grid-row: span 5;
    }
	[data-sm~="rowSpan6"] {
		grid-row: span 6;
    }
	[data-sm~="rowSpan7"] {
		grid-row: span 7;
    }
	[data-sm~="rowSpan8"] {
		grid-row: span 8;
    }

    /* order */
    [data-sm~="order1"] {
        order: -8;
    }
	[data-sm~="order2"] {
        order: -7;
    }
	[data-sm~="order3"] {
        order: -6;
    }
	[data-sm~="order4"] {
        order: -5;
    }
	[data-sm~="order5"] {
        order: -4;
    }
	[data-sm~="order6"] {
        order: -3;
    }
	[data-sm~="order7"] {
        order: -2;
    }
	[data-sm~="order8"] {
        order: -1;
    }

    /* horizontal align */
    [data-sm~="left"] {
        justify-self: start;
    }
    [data-sm~="center"] {
        justify-self: center;
    }
    [data-sm~="right"] {
        justify-self: end;
    }
    [data-sm~="noHA"] {
        justify-self: unset;
    }

    /* vertical align */
    [data-sm~="top"] {
        align-self: start;
    }
    [data-sm~="middle"] {
        align-self: center;
    }
    [data-sm~="bottom"] {
        align-self: end;
    }
    [data-sm~="noVA"] {
        align-self: unset;
    }

    /* text align */
    [data-sm~="textL"] {
        text-align: left;
    }
    [data-sm~="textC"] {
        text-align: center;
    }
    [data-sm~="textR"] {
        text-align: right;
    }
    [data-sm~="noTA"] {
        text-align: unset;
    }

    /* hide element */
    [data-sm*="hide"] {
        display: none;
    }

    /* show element */
    [data-sm*="show"] {
        display: block;
    }

    /* responsive image */
    [data-sm*="rspImg"] {
        height: auto;
        width: 100%;
    }
}

/* Laptop & Desktop rules */
@media (min-width: 900px) {
    /* default to one column */
    [data-md*="column"] {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0;
    }
        
    /* remove leading/trailing margins on columns */
    [data-md*="column"] > * {
        margin: 0;
    }

    /* remove leading/trailing margins on content within columns */
    [data-md*="column"] > * > :first-child {
        margin-top: 0;
    }
    [data-md*="column"] > * > :last-child {
        margin-bottom: 0;
    }
    
    /* padding */
    [data-md~="pad"] {
        padding: var(--pad);
    }
    [data-md~="pad2"] {
        padding: var(--pad2);
    }

    [data-md] > [data-md~="noPad"],
    [data-md~="noPad"] {
        padding: 0;
    }

    [data-md~="childPad"] > * {
        padding: var(--pad);
    }
    [data-md~="childPad2"] > * {
        padding: var(--pad2);
    }

    /* gutter */
    [data-md~="gap"] {
        gap: var(--gap);
    }
    [data-md~="gap2"] {
        gap: var(--gap2);
    }

    [data-md] > [data-md~="noGap"],
    [data-md~="noGap"] {
        gap: 0;
    }

    /* columns */
    [data-md~="1column"] {
        grid-template-columns: repeat(1, 1fr);
    }
	[data-md~="2column"] {
        grid-template-columns: repeat(2, 1fr);
    }
	[data-md~="3column"] {
        grid-template-columns: repeat(3, 1fr);
    }
	[data-md~="4column"] {
        grid-template-columns: repeat(4, 1fr);
    }
	[data-md~="5column"] {
        grid-template-columns: repeat(5, 1fr);
    }
	[data-md~="6column"] {
        grid-template-columns: repeat(6, 1fr);
    }
	[data-md~="7column"] {
        grid-template-columns: repeat(7, 1fr);
    }
	[data-md~="8column"] {
        grid-template-columns: repeat(8, 1fr);
    }

    /* column spans */
    [data-md~="colSpan2"] {
        grid-column: span 2;
    }
	[data-md~="colSpan3"] {
        grid-column: span 3;
    }
	[data-md~="colSpan4"] {
        grid-column: span 4;
    }
	[data-md~="colSpan5"] {
        grid-column: span 5;
    }
	[data-md~="colSpan6"] {
        grid-column: span 6;
    }
	[data-md~="colSpan7"] {
        grid-column: span 7;
    }
	[data-md~="colSpan8"] {
        grid-column: span 8;
    }

    /* row spans */
    [data-md~="rowSpan2"] {
		grid-row: span 2;
    }
	[data-md~="rowSpan3"] {
		grid-row: span 3;
    }
	[data-md~="rowSpan4"] {
		grid-row: span 4;
    }
	[data-md~="rowSpan5"] {
		grid-row: span 5;
    }
	[data-md~="rowSpan6"] {
		grid-row: span 6;
    }
	[data-md~="rowSpan7"] {
		grid-row: span 7;
    }
	[data-md~="rowSpan8"] {
		grid-row: span 8;
    }

    /* order */
    [data-md~="order1"] {
        order: -8;
    }
	[data-md~="order2"] {
        order: -7;
    }
	[data-md~="order3"] {
        order: -6;
    }
	[data-md~="order4"] {
        order: -5;
    }
	[data-md~="order5"] {
        order: -4;
    }
	[data-md~="order6"] {
        order: -3;
    }
	[data-md~="order7"] {
        order: -2;
    }
	[data-md~="order8"] {
        order: -1;
    }

    /* horizontal align */
    [data-md~="left"] {
        justify-self: start;
    }
    [data-md~="center"] {
        justify-self: center;
    }
    [data-md~="right"] {
        justify-self: end;
    }
    [data-md~="noHA"] {
        justify-self: unset;
    }

    /* vertical align */
    [data-md~="top"] {
        align-self: start;
    }
    [data-md~="middle"] {
        align-self: center;
    }
    [data-md~="bottom"] {
        align-self: end;
    }
    [data-md~="noVA"] {
        align-self: unset;
    }

    /* text align */
    [data-md~="textL"] {
        text-align: left;
    }
    [data-md~="textC"] {
        text-align: center;
    }
    [data-md~="textR"] {
        text-align: right;
    }
    [data-md~="noTA"] {
        text-align: unset;
    }

    /* hide element */
    [data-md*="hide"] {
        display: none;
    }

    /* show element */
    [data-md*="show"] {
        display: block;
    }

    /* responsive image */
    [data-md*="rspImg"] {
        height: auto;
        width: 100%;
    }
}

/* Large Desktop rules */
@media (min-width: 1200px) {
    /* default to one column */
    [data-lg*="column"] {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0;
    }
        
    /* remove leading/trailing margins on columns */
    [data-lg*="column"] > * {
        margin: 0;
    }

    /* remove leading/trailing margins on content within columns */
    [data-lg*="column"] > * > :first-child {
        margin-top: 0;
    }
    [data-lg*="column"] > * > :last-child {
        margin-bottom: 0;
    }
    
    /* padding */
    [data-lg~="pad"] {
        padding: var(--pad);
    }
    [data-lg~="pad2"] {
        padding: var(--pad2);
    }

    [data-lg] > [data-lg~="noPad"],
    [data-lg~="noPad"] {
        padding: 0;
    }

    [data-lg~="childPad"] > * {
        padding: var(--pad);
    }
    [data-lg~="childPad2"] > * {
        padding: var(--pad2);
    }

    /* gutter */
    [data-lg~="gap"] {
        gap: var(--gap);
    }
    [data-lg~="gap2"] {
        gap: var(--gap2);
    }

    [data-lg] > [data-lg~="noGap"],
    [data-lg~="noGap"] {
        gap: 0;
    }

    /* columns */
    [data-lg~="1column"] {
        grid-template-columns: repeat(1, 1fr);
    }
	[data-lg~="2column"] {
        grid-template-columns: repeat(2, 1fr);
    }
	[data-lg~="3column"] {
        grid-template-columns: repeat(3, 1fr);
    }
	[data-lg~="4column"] {
        grid-template-columns: repeat(4, 1fr);
    }
	[data-lg~="5column"] {
        grid-template-columns: repeat(5, 1fr);
    }
	[data-lg~="6column"] {
        grid-template-columns: repeat(6, 1fr);
    }
	[data-lg~="7column"] {
        grid-template-columns: repeat(7, 1fr);
    }
	[data-lg~="8column"] {
        grid-template-columns: repeat(8, 1fr);
    }

    /* column spans */
    [data-lg~="colSpan2"] {
        grid-column: span 2;
    }
	[data-lg~="colSpan3"] {
        grid-column: span 3;
    }
	[data-lg~="colSpan4"] {
        grid-column: span 4;
    }
	[data-lg~="colSpan5"] {
        grid-column: span 5;
    }
	[data-lg~="colSpan6"] {
        grid-column: span 6;
    }
	[data-lg~="colSpan7"] {
        grid-column: span 7;
    }
	[data-lg~="colSpan8"] {
        grid-column: span 8;
    }

    /* row spans */
    [data-lg~="rowSpan2"] {
		grid-row: span 2;
    }
	[data-lg~="rowSpan3"] {
		grid-row: span 3;
    }
	[data-lg~="rowSpan4"] {
		grid-row: span 4;
    }
	[data-lg~="rowSpan5"] {
		grid-row: span 5;
    }
	[data-lg~="rowSpan6"] {
		grid-row: span 6;
    }
	[data-lg~="rowSpan7"] {
		grid-row: span 7;
    }
	[data-lg~="rowSpan8"] {
		grid-row: span 8;
    }

    /* order */
    [data-lg~="order1"] {
        order: -8;
    }
	[data-lg~="order2"] {
        order: -7;
    }
	[data-lg~="order3"] {
        order: -6;
    }
	[data-lg~="order4"] {
        order: -5;
    }
	[data-lg~="order5"] {
        order: -4;
    }
	[data-lg~="order6"] {
        order: -3;
    }
	[data-lg~="order7"] {
        order: -2;
    }
	[data-lg~="order8"] {
        order: -1;
    }

    /* horizontal align */
    [data-lg~="left"] {
        justify-self: start;
    }
    [data-lg~="center"] {
        justify-self: center;
    }
    [data-lg~="right"] {
        justify-self: end;
    }
    [data-lg~="noHA"] {
        justify-self: unset;
    }

    /* vertical align */
    [data-lg~="top"] {
        align-self: start;
    }
    [data-lg~="middle"] {
        align-self: center;
    }
    [data-lg~="bottom"] {
        align-self: end;
    }
    [data-lg~="noVA"] {
        align-self: unset;
    }

    /* text align */
    [data-lg~="textL"] {
        text-align: left;
    }
    [data-lg~="textC"] {
        text-align: center;
    }
    [data-lg~="textR"] {
        text-align: right;
    }
    [data-lg~="noTA"] {
        text-align: unset;
    }

    /* hide element */
    [data-lg*="hide"] {
        display: none;
    }

    /* show element */
    [data-lg*="show"] {
        display: block;
    }

    /* responsive image */
    [data-lg*="rspImg"] {
        height: auto;
        width: 100%;
    }
}

/* Extra Large Desktop rules */
@media (min-width: 1536px) {
    /* default to one column */
    [data-xl*="column"] {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0;
    }
        
    /* remove leading/trailing margins on columns */
    [data-xl*="column"] > * {
        margin: 0;
    }

    /* remove leading/trailing margins on content within columns */
    [data-xl*="column"] > * > :first-child {
        margin-top: 0;
    }
    [data-xl*="column"] > * > :last-child {
        margin-bottom: 0;
    }
    
    /* padding */
    [data-xl~="pad"] {
        padding: var(--pad);
    }
    [data-xl~="pad2"] {
        padding: var(--pad2);
    }

    [data-xl] > [data-xl~="noPad"],
    [data-xl~="noPad"] {
        padding: 0;
    }

    [data-xl~="childPad"] > * {
        padding: var(--pad);
    }
    [data-xl~="childPad2"] > * {
        padding: var(--pad2);
    }

    /* gutter */
    [data-xl~="gap"] {
        gap: var(--gap);
    }
    [data-xl~="gap2"] {
        gap: var(--gap2);
    }

    [data-xl] > [data-xl~="noGap"],
    [data-xl~="noGap"] {
        gap: 0;
    }

    /* columns */
    [data-xl~="1column"] {
        grid-template-columns: repeat(1, 1fr);
    }
	[data-xl~="2column"] {
        grid-template-columns: repeat(2, 1fr);
    }
	[data-xl~="3column"] {
        grid-template-columns: repeat(3, 1fr);
    }
	[data-xl~="4column"] {
        grid-template-columns: repeat(4, 1fr);
    }
	[data-xl~="5column"] {
        grid-template-columns: repeat(5, 1fr);
    }
	[data-xl~="6column"] {
        grid-template-columns: repeat(6, 1fr);
    }
	[data-xl~="7column"] {
        grid-template-columns: repeat(7, 1fr);
    }
	[data-xl~="8column"] {
        grid-template-columns: repeat(8, 1fr);
    }

    /* column spans */
    [data-xl~="colSpan2"] {
        grid-column: span 2;
    }
	[data-xl~="colSpan3"] {
        grid-column: span 3;
    }
	[data-xl~="colSpan4"] {
        grid-column: span 4;
    }
	[data-xl~="colSpan5"] {
        grid-column: span 5;
    }
	[data-xl~="colSpan6"] {
        grid-column: span 6;
    }
	[data-xl~="colSpan7"] {
        grid-column: span 7;
    }
	[data-xl~="colSpan8"] {
        grid-column: span 8;
    }

    /* row spans */
    [data-xl~="rowSpan2"] {
		grid-row: span 2;
    }
	[data-xl~="rowSpan3"] {
		grid-row: span 3;
    }
	[data-xl~="rowSpan4"] {
		grid-row: span 4;
    }
	[data-xl~="rowSpan5"] {
		grid-row: span 5;
    }
	[data-xl~="rowSpan6"] {
		grid-row: span 6;
    }
	[data-xl~="rowSpan7"] {
		grid-row: span 7;
    }
	[data-xl~="rowSpan8"] {
		grid-row: span 8;
    }

    /* order */
    [data-xl~="order1"] {
        order: -8;
    }
	[data-xl~="order2"] {
        order: -7;
    }
	[data-xl~="order3"] {
        order: -6;
    }
	[data-xl~="order4"] {
        order: -5;
    }
	[data-xl~="order5"] {
        order: -4;
    }
	[data-xl~="order6"] {
        order: -3;
    }
	[data-xl~="order7"] {
        order: -2;
    }
	[data-xl~="order8"] {
        order: -1;
    }

    /* horizontal align */
    [data-xl~="left"] {
        justify-self: start;
    }
    [data-xl~="center"] {
        justify-self: center;
    }
    [data-xl~="right"] {
        justify-self: end;
    }
    [data-xl~="noHA"] {
        justify-self: unset;
    }

    /* vertical align */
    [data-xl~="top"] {
        align-self: start;
    }
    [data-xl~="middle"] {
        align-self: center;
    }
    [data-xl~="bottom"] {
        align-self: end;
    }
    [data-xl~="noVA"] {
        align-self: unset;
    }

    /* text align */
    [data-xl~="textL"] {
        text-align: left;
    }
    [data-xl~="textC"] {
        text-align: center;
    }
    [data-xl~="textR"] {
        text-align: right;
    }
    [data-xl~="noTA"] {
        text-align: unset;
    }

    /* hide element */
    [data-xl*="hide"] {
        display: none;
    }

    /* show element */
    [data-xl*="show"] {
        display: block;
    }

    /* responsive image */
    [data-xl*="rspImg"] {
        height: auto;
        width: 100%;
    }
}