.flex           {display: flex;}
.flex.jcsb      {justify-content: space-between;}
.flex.jcsa      {justify-content: space-around;}
.flex.jcc       {justify-content: center;}
.flex.jcfe      {justify-content: flex-end;}
.flex.aic       {align-items: center;}
.flex.aife      {align-items: flex-end;}
.flex.col       {flex-direction: column;}
.flex.g-g       {gap: var(--gutter);}
.flex.g-gh      {gap: var(--gutter-h);}
.flex.g-gv      {gap: var(--gutter-v);}
.flex.g-xxxs    {gap: var(--size-xxxs);}
.flex.g-xxs     {gap: var(--size-xxs);}
.flex.g-xs      {gap: var(--size-xs);}
.flex.g-xs      {gap: var(--size-xs);}
.flex.g-s       {gap: var(--size-s);}
.flex.g-m       {gap: var(--size-m);}
.flex.g-l       {gap: var(--size-l);}
.flex.g-xl      {gap: var(--size-xl);}
.flex.g-xxl     {gap: var(--size-xxl);}
.flex.g-xxxl    {gap: var(--size-xxxl);}

.grid           {display:  grid;}
.grid.col1      {grid-template-columns: repeat(1, 1fr);}
.grid.col2      {grid-template-columns: repeat(2, 1fr);}
.grid.col3      {grid-template-columns: repeat(3, 1fr);}
.grid.col4      {grid-template-columns: repeat(4, 1fr);}
.grid.col5      {grid-template-columns: repeat(5, 1fr);}

.relative       {position: relative;}
.absolute       {position: absolute;}
.absolute.t-0    {top: 0}
.absolute.b-0    {bottom: 0}
.absolute.l-0    {left: 0}
.absolute.r-0    {right: 0}
.absolute.all0  {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

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

h1.primary,
h2.primary,
h3.primary,
h4.primary,
h5.primary,
p.primary,
a.primary,
span.primary,
strong.primary,
i.primary {
    color: var(--primary-700)
}
h1.secondary,
h2.secondary,
h3.secondary,
h4.secondary,
h5.secondary,
p.secondary,
a.secondary,
span.secondary,
strong.secondary,
i.secondary {
    color: var(--secondary-700)
}
h1.mono,
h2.mono,
h3.mono,
h4.mono,
h5.mono,
p.mono,
a.mono,
span.mono,
strong.mono,
i.mono {
    font-family: var(--mono-family)
}
.italic {
    font-style: italic;
}
.dull.blur {
    filter: blur(10px) brightness(10%);
    -webkit-filter: blur(10px) brightness(10%);
}
.caption {
    font-weight: 200;
    color: var(--neutral-500);
    font-size: .7em;
    letter-spacing: .2em;
}
.split {
    display: grid;    
    gap: var(--gutter-h);
    grid-template-columns: 1fr;
}
@media (max-width: 480px) {
    .not-mobile {
        display: none;
    }
    .caption {
        text-align: center;
    }
}
@media (min-width: 480px) {
    .mobile {
        display: none;
    }
    .split {
        column-gap: var(--gutter-v);
        grid-template-columns: 1fr 1fr;
    }
}