.flex {
    display: flex;

    &-align {
        &-center { align-items: center; }
        &-start { align-items: flex-start; }
    }

    &-col {
        flex-direction: column;
    }

    &-inline {
        display: inline-flex;
    }

    &-justify {
        &-between { justify-content: space-between; }
        &-center { justify-content: center; }
        &-end { justify-content: flex-end; }
        &-start { justify-content: flex-start; }
    }

    &-row {
        flex-direction: row;
    }

    &-shrink {
        &-0 { flex-shrink: 0; }
    }

    &-wrap {
        flex-wrap: wrap;
    }
}
@media only screen and (min-width: 768px) {
    .sm-flex-row { flex-direction: row; }
}

.grid {
    display: grid;

    &-cols {
        &-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        &-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        &-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        &-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        &-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
        &-6 {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        &-12 {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }
    }

    &-gap {
        &-4 { gap: 1rem; }
        &-8 { gap: 2rem; }
        &-x {
            &-4 { column-gap: 1rem; }
            &-8 { column-gap: 2rem; }
            &-12 { column-gap: 3rem; }
        }
        &-y {
            &-4 { row-gap: 1rem; }
            &-8 { row-gap: 2rem; }
            &-12 { row-gap: 3rem; }
        }
    }

    &-span {
        &-1 { grid-column: span 1 / span 1; }
        &-2 { grid-column: span 2 / span 2; }
        &-3 { grid-column: span 3 / span 3; }
        &-4 { grid-column: span 4 / span 4; }
        &-5 { grid-column: span 5 / span 5; }
        &-6 { grid-column: span 6 / span 6; }
        &-8 { grid-column: span 8 / span 8; }
        &-12 { grid-column: span 12 / span 12; }
    }
}

.hidden {
    display: none;
}

.m {
    &-0 { margin: 0; }
    &b {
        &-0 { margin-bottom: 0; }
        &-1 { margin-bottom: 0.25rem; }
        &-2 { margin-bottom: 0.5rem; }
        &-3 { margin-bottom: 0.75rem; }
        &-4 { margin-bottom: 1rem; }
        &-6 { margin-bottom: 1.5rem; }
        &-7 { margin-bottom: 1.75rem; }
        &-8 { margin-bottom: 2rem; }
        &-12 { margin-bottom: 3rem; }
        &-16 { margin-bottom: 4rem; }
    }
    &l {
        &-1 { margin-left: 0.25rem; }
        &-2 { margin-left: 0.5rem; }
        &-4 { margin-left: 1rem; }
        &-6 { margin-left: 1.5rem; }
    }
    &r {
        &-1 { margin-right: 0.25rem; }
        &-2 { margin-right: 0.5rem; }
        &-3 { margin-right: 0.75rem; }
        &-4 { margin-right: 1rem; }
        &-6 { margin-right: 1.5rem; }
    }
    &t {
        &-0 { margin-top: 0; }
        &-1 { margin-top: 0.25rem; }
        &-2 { margin-top: 0.5rem; }
        &-3 { margin-top: 0.75rem; }
        &-4 { margin-top: 1rem; }
        &-8 { margin-top: 2rem; }
        &-10 { margin-top: 2.5rem; }
        &-12 { margin-top: 3rem; }
        &-16 { margin-top: 4rem; }
        &-20 { margin-top: 5rem; }
        &-24 { margin-top: 6rem; }
    }
    &x {
        &-2 {
            margin-left: 0.5rem;
            margin-right: 0.5rem;
        }
        &-4 {
            margin-left: 1rem;
            margin-right: 1rem;
        }
        &-8 {
            margin-left: 2rem;
            margin-right: 2rem;
        }
    }
    &y {
        &-0 {
            margin-top: 0;
            margin-bottom: 0;
        }
        &-2 {
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }
        &-4 {
            margin-top: 1rem;
            margin-bottom: 1rem;
        }
    }
}

.overflow {
    &-hidden {
        overflow: hidden;
    }
}

.p {
    &-2 { padding: 0.5rem; }
    &-4 { padding: 1rem; }
    &-8 { padding: 2rem; }
    &b {
        &-2 { padding-bottom: 0.5rem; }
        &-4 { padding-bottom: 1rem; }
        &-6 { padding-bottom: 1.5rem; }
        &-12 { padding-bottom: 3rem; }
        &-16 { padding-bottom: 4rem; }
    }
    &l {
        &-4 { padding-left: 1rem; }
        &-8 { padding-left: 2rem; }
        &-12 { padding-left: 3rem; }
    }
    &r {
        &-8 { padding-right: 2rem; }
        &-12 { padding-right: 3rem; }
    }
    &t {
        &-1 { padding-top: 0.25rem; }
        &-2 { padding-top: 0.5rem; }
        &-8 { padding-top: 2rem; }
        &-24 { padding-top: 6rem; }
    }
    &x {
        &-2 {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        &-4 {
            padding-left: 1rem;
            padding-right: 1rem;
        }
        &-6 {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        &-8 {
            padding-left: 2rem;
            padding-right: 2rem;
        }
        &-12 {
            padding-left: 3rem;
            padding-right: 3rem;
        }
    }
    &y {
        &-4 {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        &-8 {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
        &-12 {
            padding-top: 3rem;
            padding-bottom: 3rem;
        }
    }
}

.relative {
    position: relative;
}

.sticky {
    height: 0%;
    position: sticky;
    top: 0;
}

.text {
    &-center { text-align: center; }
    &-sm { font-size: 0.9rem; }
    &-white { color: #fff; }
}

.top {
    &-px { top: 1px; }
}

.w {
    &-4 { width: 1rem; }
    &-6 { width: 1.5rem; }
    &-1\/5 { width: 20%; }
    &-1\/4 { width: 25%; }
    &-2\/5 { width: 40%; }
    &-1\/2 { width: 50%; }
    &-3\/5 { width: 60%; }
    &-3\/4 { width: 75%; }
    &-4\/5 { width: 80%; }
    &-11\/12 { width: min(91.6667%, 1440px); }
    &-full { width: 100%; }
    &-wide {
        width: calc(100% - 3rem);
    }
}
@media only screen and (min-width: 768px) {
    .w-wide {
        width: min(91.66667%, 1440px);
    }
}

//
// all other media queries

@media only screen and (min-width: 512px) {
    .xs\:inline {
        display: inline;
    }
    .xs\:hidden {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .sm\:inline {
        display: inline;
    }
    .sm\:hidden {
        display: none;
    }
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:w-1\/5 {
        width: 20%;
    }
    .sm\:w-3\/5 {
        width: 60%;
    }
    .sm\:w-3\/5 {
        width: 60%;
    }
    .sm\:list {
        display: list-item;
        list-style: none;
    }
}

@media only screen and (min-width: 1025px) {
    .md\:block {
        display: block;
    }
    .md\:flex {
        display: flex;
    }
    .md\:inline {
        display: inline;
    }
}