/* Utility Classes */
.shadow-low {
    box-shadow: var(--shadow-elevation-low);
}

.shadow-med {
    box-shadow: var(--shadow-elevation-medium);
}

.shadow-high {
    box-shadow: var(--shadow-elevation-high);
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    /*padding: 0 1rem*/
}
/*
.padding-none {
    padding: var(--padding-none)
}

.padding-xs {
    padding: var(--padding-xs)
}

.padding-s {
    padding: var(--padding-s)
}

.padding-md {
    padding: var(--padding-md)
}

.padding-lg {
    padding: var(--padding-lg)
}
*/

/* No Padding */
.padding-none { padding: var(--padding-none); }
.padding-left-none { padding-left: var(--padding-none); }
.padding-right-none { padding-right: var(--padding-none); }
.padding-top-none { padding-top: var(--padding-none); }
.padding-bottom-none { padding-bottom: var(--padding-none); }
.padding-x-none { padding-left: var(--padding-none); padding-right: var(--padding-none); }
.padding-y-none { padding-top: var(--padding-none); padding-bottom: var(--padding-none); }

/* Extra Small Padding 1rem/0.75rem */
.padding-xs { padding: var(--padding-xs); }
.padding-left-xs { padding-left: var(--padding-xs); }
.padding-right-xs { padding-right: var(--padding-xs); }
.padding-top-xs { padding-top: var(--padding-xs); }
.padding-bottom-xs { padding-bottom: var(--padding-xs); }
.padding-x-xs { padding-left: var(--padding-xs); padding-right: var(--padding-xs); }
.padding-y-xs { padding-top: var(--padding-xs); padding-bottom: var(--padding-xs); }

/* Small Padding 1.5rem/1rem */
.padding-s { padding: var(--padding-s); }
.padding-left-s { padding-left: var(--padding-s); }
.padding-right-s { padding-right: var(--padding-s); }
.padding-top-s { padding-top: var(--padding-s); }
.padding-bottom-s { padding-bottom: var(--padding-s); }
.padding-x-s { padding-left: var(--padding-s); padding-right: var(--padding-s); }
.padding-y-s { padding-top: var(--padding-s); padding-bottom: var(--padding-s); }

/* Medium Padding 2.5rem/1.5rem */
.padding-md { padding: var(--padding-md); }
.padding-left-md { padding-left: var(--padding-md); }
.padding-right-md { padding-right: var(--padding-md); }
.padding-top-md { padding-top: var(--padding-md); }
.padding-bottom-md { padding-bottom: var(--padding-md); }
.padding-x-md { padding-left: var(--padding-md); padding-right: var(--padding-md); }
.padding-y-md { padding-top: var(--padding-md); padding-bottom: var(--padding-md); }

/* Large Padding 4rem/2.5rem */
.padding-lg { padding: var(--padding-lg); }
.padding-left-lg { padding-left: var(--padding-lg); }
.padding-right-lg { padding-right: var(--padding-lg); }
.padding-top-lg { padding-top: var(--padding-lg); }
.padding-bottom-lg { padding-bottom: var(--padding-lg); }
.padding-x-lg { padding-left: var(--padding-lg); padding-right: var(--padding-lg); }
.padding-y-lg { padding-top: var(--padding-lg); padding-bottom: var(--padding-lg); }

/* Extra Large Padding 6rem/4rem */
.padding-xl { padding: var(--padding-xl); }
.padding-left-xl { padding-left: var(--padding-xl); }
.padding-right-xl { padding-right: var(--padding-xl); }
.padding-top-xl { padding-top: var(--padding-xl); }
.padding-bottom-xl { padding-bottom: var(--padding-xl); }
.padding-x-xl { padding-left: var(--padding-xl); padding-right: var(--padding-xl); }
.padding-y-xl { padding-top: var(--padding-xl); padding-bottom: var(--padding-xl); }

.hidden {
    display: none!important;
}