.d-flex {
    --pyn-base-unit: 0.25rem;

    display: flex;
    flex: 1;

    &.flex-wrap,
    .flex-wrap {
        flex-wrap: wrap !important;
    }

    &.flex-row,
    .flex-row {
        flex-direction: row !important;
    }

    &.flex-column,
    .flex-column {
        flex-direction: column !important;
    }

    &.align-items-center,
    .align-items-center {
        align-items: center !important;
    }

    &.justify-content-left,
    .justify-content-left {
        justify-content: left !important;
    }

    &.justify-content-center,
    .justify-content-center {
        justify-content: center !important;
    }

    &.justify-content-end,
    .justify-content-end {
        justify-content: end !important;
    }

    &.flex-grow-1,
    .flex-grow-1 {
        flex-grow: 1 !important;
    }

    .gap-0, &.gap-0 {
        gap: 0 !important;
    }

    .gap-1, &.gap-1 {
        gap: calc(1 * var(--pyn-base-unit)) !important;
    }

    .gap-2, &.gap-2 {
        gap: calc(2 * var(--pyn-base-unit)) !important;
    }

    .gap-3, &.gap-3 {
        gap: calc(3 * var(--pyn-base-unit)) !important;
    }

    .gap-4, &.gap-4 {
        gap: calc(4 * var(--pyn-base-unit)) !important;
    }

    .col {
        flex: 1 0 0;
    }

    .col-auto {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .col-1 {
        flex: 0 0 auto !important;
        width: 10% !important;
    }

    .col-2 {
        flex: 0 0 auto !important;
        width: 20% !important;
    }

    .col-3 {
        flex: 0 0 auto !important;
        width: 30% !important;
    }

    .col-4 {
        flex: 0 0 auto !important;
        width: 40% !important;
    }

    .col-5 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }

    .col-6 {
        flex: 0 0 auto !important;
        width: 60% !important;
    }

    .col-7 {
        flex: 0 0 auto !important;
        width: 70% !important;
    }

    .col-8 {
        flex: 0 0 auto !important;
        width: 80% !important;
    }

    .col-9 {
        flex: 0 0 auto !important;
        width: 90% !important;
    }

    .col-10 {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
}