.noBuffer,
.noPadding,
.p0 {
    padding: 0 !important;
}

.buffer,
.padding,
.p1 {
    padding: 1.5% !important;
}

.xbuffer,
.xpadding,
.p3 {
    padding: 3% !important;
}

.noGutter,
.noMargin,
.m0 {
    margin: 0 !important;
}

.margin,
.m1 {
    margin-inline: 1.5% !important;
}

.xmargin,
.m3 {
    margin-inline: 3% !important;
}

.gutterRight,
.marginRight {
    margin-right: 1.5% !important;
}

.gutterLeft,
.marginLeft {
    margin-left: 1.5% !important;
}

.xgutterRight,
.xmarginRight,
.xmr {
    margin-right: clamp(1rem, 3vw, 3%) !important;
}

.xgutterLeft,
.xmarginLeft,
.xml {
    margin-left: clamp(1rem, 3vw, 3%) !important;
}

.xpaddingRight,
.xbufferRight,
.xpr {
    padding-right: clamp(1rem, 3vw, 3%) !important;
}

.xpaddingLeft,
.xbufferLeft,
.xpl {
    padding-left: clamp(1rem, 3vw, 3%) !important;
}

.noBottom,
.row.noBottom {
    margin-bottom: 0 !important;
}

.addBottom {
    margin-bottom: var(--space-md) !important;
}

.bigBottom {
    margin-bottom: var(--space-xl) !important;
}

.center {
    display: block;
    margin-inline: auto;
}

.centerText {
    text-align: center;
}

.s-centerText {
    text-align: center;
}

.db {
    display: block;
}

.dib {
    display: inline-block;
}

.dt {
    display: table;
}

.dFlex {
    display: flex;
}

.bgPrimary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.bgBlack {
    background-color: var(--color-black);
}

.bgWhite {
    background-color: var(--color-white);
}

.bgTrans {
    background-color: transparent;
}

.lightgrey,
.lightgray {
    background-color: var(--color-surface);
}

.darkgrey,
.darkgray {
    background-color: var(--color-surface-strong);
}

.dark {
    background-color: #222222;
    color: var(--color-white);
}

.gradient {
    background: linear-gradient(135deg, var(--color-accent) 0, var(--color-primary) 100%);
    color: var(--color-white);
}

.gradientx {
    background: linear-gradient(-45deg, var(--color-accent), var(--color-primary), var(--color-accent-2));
    background-size: 500% 500%;
    color: var(--color-white);
    animation: gradientShift 20s ease infinite;
}

.white {
    color: var(--color-white);
}

.black {
    color: var(--color-black);
}

.uc {
    text-transform: uppercase;
}

.lc {
    text-transform: lowercase;
}

.tracked {
    letter-spacing: 0.1em;
}

.trackedTight {
    letter-spacing: -0.05em;
}

.b0 {
    border: none !important;
}

.b1 {
    border: 1px solid currentColor;
}

.b2 {
    border: 2px solid currentColor;
}

.b3 {
    border: 3px solid currentColor;
}

.b4 {
    border: 4px solid currentColor;
}

.b5 {
    border: 5px solid currentColor;
}

.bDashed {
    border-style: dashed;
}

.bDotted {
    border-style: dotted;
}

.pill {
    border-radius: var(--radius-pill);
}

.circle {
    border-radius: 50%;
}

.rounded {
    border-radius: var(--radius-md);
}

.txtShadow {
    text-shadow: 0 0 34px rgba(36, 36, 36, 0.82);
}

.hide {
    display: none !important;
}

@media only screen and (min-width: 768px) {
    .showMobile {
        display: none !important;
    }

    .s-centerText {
        text-align: inherit;
    }
}

@media only screen and (max-width: 767px) {
    .showTablet,
    .hideMobile {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .hideTablet {
        display: none !important;
    }
}

@media only screen and (min-width: 1024px) {
    .showTablet,
    .hideDesktop {
        display: none !important;
    }
}

@media only screen and (max-width: 1023px) {
    .showDesktop {
        display: none !important;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}