utilities.scss

.grid {
    @media all and (min-width: 1024px) {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 2rem;
        align-items: start;
    }
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

[hidden] {
    display: none !important;
}

.mobile-only {
    @media all and (min-width: 1024px) {
        display: none;
    }
}

.desktop-only {
    @media all and (max-width: 1023px) {
        display: none;
    }
}

.text.text {
    color: inherit;
    font: inherit;
    font-family: var(--text-font);
    margin: 0;
}

.color-brand {
    color: var(--link-color);
}

.font-weight-medium {
    font-weight: 500;
}

.center-text {
    text-align: center;
    grid-column: 1 / -1;
}

.text-dark {
    color: var(--headings-color);
}

.divider {
    border-bottom: 1px solid var(--divider-color);
    border-block-end: 1px solid var(--divider-color);
}

.fs-step--1 {
    font-size: .875rem;
}

.fs-step-0 {
    font-size: var(--step-0);
}

.fs-step-1 {
    font-size: var(--step-1);
}

.fs-step-2 {
    font-size: var(--step-2);
}

.fs-step-3 {
    font-size: var(--step-3);
}

.fs-step-4 {
    font-size: var(--step-4);
}

.fs-step-5 {
    font-size: var(--step-5);
}

.fs-step-6 {
    font-size: var(--step-6);
}

.grid--center-items {
    align-items: center;
}

.span-1-3 {
    grid-column: 1 / 4;
}

.span-1-4 {
    grid-column: 1 / 5;
}

.span-1-5 {
    grid-column: 1 / 6;
}

.span-1-6 {
    grid-column: 1 / 7;
}

.span-1-7 {
    grid-column: 1 / 8;
}

.span-1-12 {
    grid-column: 1 / -1;
}

.span-4-12 {
    grid-column: 4 / 13;
}

.span-6-12 {
    grid-column: 6 / 13;
}

.span-7-12 {
    grid-column: 7 / 13;
}

.span-8-12 {
    grid-column: 8 / 13;
}

.span-10-12 {
    grid-column: 10 / 13;
}

.span-11-12 {
    grid-column: 11 / 13;
}

.span-4-9 {
    grid-column: 4 / 10;
}

.span-4-11 {
    grid-column: 4 / 11;
}

.span-5-12 {
    grid-column: 5 / 12;
}

.span-3-10 {
    grid-column: 3 / 11;
}

.span-6-7 {
    grid-column: 6 / 8;
}

.span-5-8 {
    grid-column: 5 / 9;
}