[data-scroll-start],
[data-scroll-end] {
    position: relative;
    overflow-x: hidden;
}

[data-scroll-start] > *,
[data-scroll-end] > * {
    overflow-x: scroll;
    scroll-behavior: var(--scroll-behavior);
}

[data-scroll-start]::before,
[data-scroll-end]::after {
    position: absolute;
    top: 0;
    z-index: 1;
    transition: opacity var(--transition);
    background-image: linear-gradient(to right, #fff0);
    inline-size: var(--gutter);
    block-size: 100%;
    pointer-events: none;
    content: "";
}

[data-scroll-start]::before {
    left: 0;
}

[data-scroll-end]::after {
    right: 0;
    transform: scaleX(-1);
}

[data-scroll-start="true"]::before,
[data-scroll-end="true"]::after {
    opacity: 0;
}

.nav {
    display: flex;
    gap: calc(var(--gutter) / 3);
    margin: 0;
    padding: 0;
}

.nav-vertical {
    flex-direction: column;
}

.nav-separator {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.text-start {
    text-align: start;
}

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

.text-end {
    text-align: end;
}

.text-justify {
    text-align: justify;
}

.d-flex {
    display: flex !important;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

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

.m-auto {
    margin: auto;
}

.mb-auto {
    margin-block: auto;
}

.mbs-auto {
    margin-block-start: auto;
}

.mbe-auto {
    margin-block-end: auto;
}

.mi-auto {
    margin-inline: auto;
}

.mis-auto {
    margin-inline-start: auto;
}

.mie-auto {
    margin-inline-end: auto;
}

.p-auto {
    padding: auto;
}

.pb-auto {
    padding-block: auto;
}

.pbs-auto {
    padding-block-start: auto;
}

.pbe-auto {
    padding-block-end: auto;
}

.pi-auto {
    padding-inline: auto;
}

.pis-auto {
    padding-inline-start: auto;
}

.pie-auto {
    padding-inline-end: auto;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.gap-none {
    --gap: 0;
}

.gutter-none {
    --gap: 0;
}

.gap-1 {
    --gap: calc(var(--gutter) * 1 / 12);
}

.gutter-1 {
    --gap: calc(var(--gutter) * 1 / 12);
}

.gap-2 {
    --gap: calc(var(--gutter) * 2 / 12);
}

.gutter-2 {
    --gap: calc(var(--gutter) * 2 / 12);
}

.gap-3 {
    --gap: calc(var(--gutter) * 3 / 12);
}

.gutter-3 {
    --gap: calc(var(--gutter) * 3 / 12);
}

.gap-4 {
    --gap: calc(var(--gutter) * 4 / 12);
}

.gutter-4 {
    --gap: calc(var(--gutter) * 4 / 12);
}

.gap-5 {
    --gap: calc(var(--gutter) * 5 / 12);
}

.gutter-5 {
    --gap: calc(var(--gutter) * 5 / 12);
}

.gap-6 {
    --gap: calc(var(--gutter) * 6 / 12);
}

.gutter-6 {
    --gap: calc(var(--gutter) * 6 / 12);
}

.gap-7 {
    --gap: calc(var(--gutter) * 7 / 12);
}

.gutter-7 {
    --gap: calc(var(--gutter) * 7 / 12);
}

.gap-8 {
    --gap: calc(var(--gutter) * 8 / 12);
}

.gutter-8 {
    --gap: calc(var(--gutter) * 8 / 12);
}

.gap-9 {
    --gap: calc(var(--gutter) * 9 / 12);
}

.gutter-9 {
    --gap: calc(var(--gutter) * 9 / 12);
}

.gap-10 {
    --gap: calc(var(--gutter) * 10 / 12);
}

.gutter-10 {
    --gap: calc(var(--gutter) * 10 / 12);
}

.gap-11 {
    --gap: calc(var(--gutter) * 11 / 12);
}

.gutter-11 {
    --gap: calc(var(--gutter) * 11 / 12);
}

.gap-12 {
    --gap: calc(var(--gutter) * 12 / 12);
}

.gutter-12 {
    --gap: calc(var(--gutter) * 12 / 12);
}

@media (min-width: 540px) {
    .text-sm-start {
        text-align: start;
    }

    .text-sm-center {
        text-align: center;
    }

    .text-sm-end {
        text-align: end;
    }

    .text-sm-justify {
        text-align: justify;
    }

    .d-sm-flex {
        display: flex !important;
    }

    .d-sm-none {
        display: none !important;
    }

    .d-sm-block {
        display: block !important;
    }

    .d-sm-inline {
        display: inline !important;
    }

    .d-sm-inline-block {
        display: inline-block !important;
    }

    .justify-sm-start {
        justify-content: flex-start;
    }

    .justify-sm-end {
        justify-content: flex-end;
    }

    .justify-sm-center {
        justify-content: center;
    }

    .justify-sm-between {
        justify-content: space-between;
    }

    .align-sm-start {
        align-items: flex-start;
    }

    .align-sm-end {
        align-items: flex-end;
    }

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

    .m-sm-auto {
        margin: auto;
    }

    .mb-sm-auto {
        margin-block: auto;
    }

    .mbs-sm-auto {
        margin-block-start: auto;
    }

    .mbe-sm-auto {
        margin-block-end: auto;
    }

    .mi-sm-auto {
        margin-inline: auto;
    }

    .mis-sm-auto {
        margin-inline-start: auto;
    }

    .mie-sm-auto {
        margin-inline-end: auto;
    }

    .p-sm-auto {
        padding: auto;
    }

    .pb-sm-auto {
        padding-block: auto;
    }

    .pbs-sm-auto {
        padding-block-start: auto;
    }

    .pbe-sm-auto {
        padding-block-end: auto;
    }

    .pi-sm-auto {
        padding-inline: auto;
    }

    .pis-sm-auto {
        padding-inline-start: auto;
    }

    .pie-sm-auto {
        padding-inline-end: auto;
    }

    .flex-sm-row {
        flex-direction: row;
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-sm-column {
        flex-direction: column;
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse;
    }

    .gap-sm-none {
        --gap: 0;
    }

    .gutter-sm-none {
        --gap: 0;
    }

    .gap-sm-1 {
        --gap: calc(var(--gutter) * 1 / 12);
    }

    .gutter-sm-1 {
        --gap: calc(var(--gutter) * 1 / 12);
    }

    .gap-sm-2 {
        --gap: calc(var(--gutter) * 2 / 12);
    }

    .gutter-sm-2 {
        --gap: calc(var(--gutter) * 2 / 12);
    }

    .gap-sm-3 {
        --gap: calc(var(--gutter) * 3 / 12);
    }

    .gutter-sm-3 {
        --gap: calc(var(--gutter) * 3 / 12);
    }

    .gap-sm-4 {
        --gap: calc(var(--gutter) * 4 / 12);
    }

    .gutter-sm-4 {
        --gap: calc(var(--gutter) * 4 / 12);
    }

    .gap-sm-5 {
        --gap: calc(var(--gutter) * 5 / 12);
    }

    .gutter-sm-5 {
        --gap: calc(var(--gutter) * 5 / 12);
    }

    .gap-sm-6 {
        --gap: calc(var(--gutter) * 6 / 12);
    }

    .gutter-sm-6 {
        --gap: calc(var(--gutter) * 6 / 12);
    }

    .gap-sm-7 {
        --gap: calc(var(--gutter) * 7 / 12);
    }

    .gutter-sm-7 {
        --gap: calc(var(--gutter) * 7 / 12);
    }

    .gap-sm-8 {
        --gap: calc(var(--gutter) * 8 / 12);
    }

    .gutter-sm-8 {
        --gap: calc(var(--gutter) * 8 / 12);
    }

    .gap-sm-9 {
        --gap: calc(var(--gutter) * 9 / 12);
    }

    .gutter-sm-9 {
        --gap: calc(var(--gutter) * 9 / 12);
    }

    .gap-sm-10 {
        --gap: calc(var(--gutter) * 10 / 12);
    }

    .gutter-sm-10 {
        --gap: calc(var(--gutter) * 10 / 12);
    }

    .gap-sm-11 {
        --gap: calc(var(--gutter) * 11 / 12);
    }

    .gutter-sm-11 {
        --gap: calc(var(--gutter) * 11 / 12);
    }

    .gap-sm-12 {
        --gap: calc(var(--gutter) * 12 / 12);
    }

    .gutter-sm-12 {
        --gap: calc(var(--gutter) * 12 / 12);
    }
}

@media (min-width: 744px) {
    .text-md-start {
        text-align: start;
    }

    .text-md-center {
        text-align: center;
    }

    .text-md-end {
        text-align: end;
    }

    .text-md-justify {
        text-align: justify;
    }

    .d-md-flex {
        display: flex !important;
    }

    .d-md-none {
        display: none !important;
    }

    .d-md-block {
        display: block !important;
    }

    .d-md-inline {
        display: inline !important;
    }

    .d-md-inline-block {
        display: inline-block !important;
    }

    .justify-md-start {
        justify-content: flex-start;
    }

    .justify-md-end {
        justify-content: flex-end;
    }

    .justify-md-center {
        justify-content: center;
    }

    .justify-md-between {
        justify-content: space-between;
    }

    .align-md-start {
        align-items: flex-start;
    }

    .align-md-end {
        align-items: flex-end;
    }

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

    .m-md-auto {
        margin: auto;
    }

    .mb-md-auto {
        margin-block: auto;
    }

    .mbs-md-auto {
        margin-block-start: auto;
    }

    .mbe-md-auto {
        margin-block-end: auto;
    }

    .mi-md-auto {
        margin-inline: auto;
    }

    .mis-md-auto {
        margin-inline-start: auto;
    }

    .mie-md-auto {
        margin-inline-end: auto;
    }

    .p-md-auto {
        padding: auto;
    }

    .pb-md-auto {
        padding-block: auto;
    }

    .pbs-md-auto {
        padding-block-start: auto;
    }

    .pbe-md-auto {
        padding-block-end: auto;
    }

    .pi-md-auto {
        padding-inline: auto;
    }

    .pis-md-auto {
        padding-inline-start: auto;
    }

    .pie-md-auto {
        padding-inline-end: auto;
    }

    .flex-md-row {
        flex-direction: row;
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-md-column {
        flex-direction: column;
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse;
    }

    .gap-md-none {
        --gap: 0;
    }

    .gutter-md-none {
        --gap: 0;
    }

    .gap-md-1 {
        --gap: calc(var(--gutter) * 1 / 12);
    }

    .gutter-md-1 {
        --gap: calc(var(--gutter) * 1 / 12);
    }

    .gap-md-2 {
        --gap: calc(var(--gutter) * 2 / 12);
    }

    .gutter-md-2 {
        --gap: calc(var(--gutter) * 2 / 12);
    }

    .gap-md-3 {
        --gap: calc(var(--gutter) * 3 / 12);
    }

    .gutter-md-3 {
        --gap: calc(var(--gutter) * 3 / 12);
    }

    .gap-md-4 {
        --gap: calc(var(--gutter) * 4 / 12);
    }

    .gutter-md-4 {
        --gap: calc(var(--gutter) * 4 / 12);
    }

    .gap-md-5 {
        --gap: calc(var(--gutter) * 5 / 12);
    }

    .gutter-md-5 {
        --gap: calc(var(--gutter) * 5 / 12);
    }

    .gap-md-6 {
        --gap: calc(var(--gutter) * 6 / 12);
    }

    .gutter-md-6 {
        --gap: calc(var(--gutter) * 6 / 12);
    }

    .gap-md-7 {
        --gap: calc(var(--gutter) * 7 / 12);
    }

    .gutter-md-7 {
        --gap: calc(var(--gutter) * 7 / 12);
    }

    .gap-md-8 {
        --gap: calc(var(--gutter) * 8 / 12);
    }

    .gutter-md-8 {
        --gap: calc(var(--gutter) * 8 / 12);
    }

    .gap-md-9 {
        --gap: calc(var(--gutter) * 9 / 12);
    }

    .gutter-md-9 {
        --gap: calc(var(--gutter) * 9 / 12);
    }

    .gap-md-10 {
        --gap: calc(var(--gutter) * 10 / 12);
    }

    .gutter-md-10 {
        --gap: calc(var(--gutter) * 10 / 12);
    }

    .gap-md-11 {
        --gap: calc(var(--gutter) * 11 / 12);
    }

    .gutter-md-11 {
        --gap: calc(var(--gutter) * 11 / 12);
    }

    .gap-md-12 {
        --gap: calc(var(--gutter) * 12 / 12);
    }

    .gutter-md-12 {
        --gap: calc(var(--gutter) * 12 / 12);
    }
}

@media (min-width: 960px) {
    .text-lg-start {
        text-align: start;
    }

    .text-lg-center {
        text-align: center;
    }

    .text-lg-end {
        text-align: end;
    }

    .text-lg-justify {
        text-align: justify;
    }

    .d-lg-flex {
        display: flex !important;
    }

    .d-lg-none {
        display: none !important;
    }

    .d-lg-block {
        display: block !important;
    }

    .d-lg-inline {
        display: inline !important;
    }

    .d-lg-inline-block {
        display: inline-block !important;
    }

    .justify-lg-start {
        justify-content: flex-start;
    }

    .justify-lg-end {
        justify-content: flex-end;
    }

    .justify-lg-center {
        justify-content: center;
    }

    .justify-lg-between {
        justify-content: space-between;
    }

    .align-lg-start {
        align-items: flex-start;
    }

    .align-lg-end {
        align-items: flex-end;
    }

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

    .m-lg-auto {
        margin: auto;
    }

    .mb-lg-auto {
        margin-block: auto;
    }

    .mbs-lg-auto {
        margin-block-start: auto;
    }

    .mbe-lg-auto {
        margin-block-end: auto;
    }

    .mi-lg-auto {
        margin-inline: auto;
    }

    .mis-lg-auto {
        margin-inline-start: auto;
    }

    .mie-lg-auto {
        margin-inline-end: auto;
    }

    .p-lg-auto {
        padding: auto;
    }

    .pb-lg-auto {
        padding-block: auto;
    }

    .pbs-lg-auto {
        padding-block-start: auto;
    }

    .pbe-lg-auto {
        padding-block-end: auto;
    }

    .pi-lg-auto {
        padding-inline: auto;
    }

    .pis-lg-auto {
        padding-inline-start: auto;
    }

    .pie-lg-auto {
        padding-inline-end: auto;
    }

    .flex-lg-row {
        flex-direction: row;
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-lg-column {
        flex-direction: column;
    }

    .flex-lg-column-reverse {
        flex-direction: column-reverse;
    }

    .gap-lg-none {
        --gap: 0;
    }

    .gutter-lg-none {
        --gap: 0;
    }

    .gap-lg-1 {
        --gap: calc(var(--gutter) * 1 / 12);
    }

    .gutter-lg-1 {
        --gap: calc(var(--gutter) * 1 / 12);
    }

    .gap-lg-2 {
        --gap: calc(var(--gutter) * 2 / 12);
    }

    .gutter-lg-2 {
        --gap: calc(var(--gutter) * 2 / 12);
    }

    .gap-lg-3 {
        --gap: calc(var(--gutter) * 3 / 12);
    }

    .gutter-lg-3 {
        --gap: calc(var(--gutter) * 3 / 12);
    }

    .gap-lg-4 {
        --gap: calc(var(--gutter) * 4 / 12);
    }

    .gutter-lg-4 {
        --gap: calc(var(--gutter) * 4 / 12);
    }

    .gap-lg-5 {
        --gap: calc(var(--gutter) * 5 / 12);
    }

    .gutter-lg-5 {
        --gap: calc(var(--gutter) * 5 / 12);
    }

    .gap-lg-6 {
        --gap: calc(var(--gutter) * 6 / 12);
    }

    .gutter-lg-6 {
        --gap: calc(var(--gutter) * 6 / 12);
    }

    .gap-lg-7 {
        --gap: calc(var(--gutter) * 7 / 12);
    }

    .gutter-lg-7 {
        --gap: calc(var(--gutter) * 7 / 12);
    }

    .gap-lg-8 {
        --gap: calc(var(--gutter) * 8 / 12);
    }

    .gutter-lg-8 {
        --gap: calc(var(--gutter) * 8 / 12);
    }

    .gap-lg-9 {
        --gap: calc(var(--gutter) * 9 / 12);
    }

    .gutter-lg-9 {
        --gap: calc(var(--gutter) * 9 / 12);
    }

    .gap-lg-10 {
        --gap: calc(var(--gutter) * 10 / 12);
    }

    .gutter-lg-10 {
        --gap: calc(var(--gutter) * 10 / 12);
    }

    .gap-lg-11 {
        --gap: calc(var(--gutter) * 11 / 12);
    }

    .gutter-lg-11 {
        --gap: calc(var(--gutter) * 11 / 12);
    }

    .gap-lg-12 {
        --gap: calc(var(--gutter) * 12 / 12);
    }

    .gutter-lg-12 {
        --gap: calc(var(--gutter) * 12 / 12);
    }
}

@media (min-width: 1260px) {
    .text-xl-start {
        text-align: start;
    }

    .text-xl-center {
        text-align: center;
    }

    .text-xl-end {
        text-align: end;
    }

    .text-xl-justify {
        text-align: justify;
    }

    .d-xl-flex {
        display: flex !important;
    }

    .d-xl-none {
        display: none !important;
    }

    .d-xl-block {
        display: block !important;
    }

    .d-xl-inline {
        display: inline !important;
    }

    .d-xl-inline-block {
        display: inline-block !important;
    }

    .justify-xl-start {
        justify-content: flex-start;
    }

    .justify-xl-end {
        justify-content: flex-end;
    }

    .justify-xl-center {
        justify-content: center;
    }

    .justify-xl-between {
        justify-content: space-between;
    }

    .align-xl-start {
        align-items: flex-start;
    }

    .align-xl-end {
        align-items: flex-end;
    }

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

    .m-xl-auto {
        margin: auto;
    }

    .mb-xl-auto {
        margin-block: auto;
    }

    .mbs-xl-auto {
        margin-block-start: auto;
    }

    .mbe-xl-auto {
        margin-block-end: auto;
    }

    .mi-xl-auto {
        margin-inline: auto;
    }

    .mis-xl-auto {
        margin-inline-start: auto;
    }

    .mie-xl-auto {
        margin-inline-end: auto;
    }

    .p-xl-auto {
        padding: auto;
    }

    .pb-xl-auto {
        padding-block: auto;
    }

    .pbs-xl-auto {
        padding-block-start: auto;
    }

    .pbe-xl-auto {
        padding-block-end: auto;
    }

    .pi-xl-auto {
        padding-inline: auto;
    }

    .pis-xl-auto {
        padding-inline-start: auto;
    }

    .pie-xl-auto {
        padding-inline-end: auto;
    }

    .flex-xl-row {
        flex-direction: row;
    }

    .flex-xl-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-xl-column {
        flex-direction: column;
    }

    .flex-xl-column-reverse {
        flex-direction: column-reverse;
    }

    .gap-xl-none {
        --gap: 0;
    }

    .gutter-xl-none {
        --gap: 0;
    }

    .gap-xl-1 {
        --gap: calc(var(--gutter) * 1 / 12);
    }

    .gutter-xl-1 {
        --gap: calc(var(--gutter) * 1 / 12);
    }

    .gap-xl-2 {
        --gap: calc(var(--gutter) * 2 / 12);
    }

    .gutter-xl-2 {
        --gap: calc(var(--gutter) * 2 / 12);
    }

    .gap-xl-3 {
        --gap: calc(var(--gutter) * 3 / 12);
    }

    .gutter-xl-3 {
        --gap: calc(var(--gutter) * 3 / 12);
    }

    .gap-xl-4 {
        --gap: calc(var(--gutter) * 4 / 12);
    }

    .gutter-xl-4 {
        --gap: calc(var(--gutter) * 4 / 12);
    }

    .gap-xl-5 {
        --gap: calc(var(--gutter) * 5 / 12);
    }

    .gutter-xl-5 {
        --gap: calc(var(--gutter) * 5 / 12);
    }

    .gap-xl-6 {
        --gap: calc(var(--gutter) * 6 / 12);
    }

    .gutter-xl-6 {
        --gap: calc(var(--gutter) * 6 / 12);
    }

    .gap-xl-7 {
        --gap: calc(var(--gutter) * 7 / 12);
    }

    .gutter-xl-7 {
        --gap: calc(var(--gutter) * 7 / 12);
    }

    .gap-xl-8 {
        --gap: calc(var(--gutter) * 8 / 12);
    }

    .gutter-xl-8 {
        --gap: calc(var(--gutter) * 8 / 12);
    }

    .gap-xl-9 {
        --gap: calc(var(--gutter) * 9 / 12);
    }

    .gutter-xl-9 {
        --gap: calc(var(--gutter) * 9 / 12);
    }

    .gap-xl-10 {
        --gap: calc(var(--gutter) * 10 / 12);
    }

    .gutter-xl-10 {
        --gap: calc(var(--gutter) * 10 / 12);
    }

    .gap-xl-11 {
        --gap: calc(var(--gutter) * 11 / 12);
    }

    .gutter-xl-11 {
        --gap: calc(var(--gutter) * 11 / 12);
    }

    .gap-xl-12 {
        --gap: calc(var(--gutter) * 12 / 12);
    }

    .gutter-xl-12 {
        --gap: calc(var(--gutter) * 12 / 12);
    }
}