@layer gaps {
    .col-gap-none {
        column-gap: 0;
    }

    .col-gap-x-small {
        column-gap: 0.5rem;
    }

    .col-gap-small {
        column-gap: 1rem;
    }

    .col-gap-medium {
        column-gap: 2rem;
    }

    .col-gap-large {
        column-gap: 4rem;
    }

    .col-gap-x-large {
        column-gap: 8rem;
    }

    .col-gap-xx-large {
        column-gap: 16rem;
    }

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

    .row-gap-x-small {
        row-gap: 0.5rem;
    }

    .row-gap-small {
        row-gap: 1rem;
    }

    .row-gap-medium {
        row-gap: 2rem;
    }

    .row-gap-large {
        row-gap: 4rem;
    }

    .row-gap-x-large {
        row-gap: 8rem;
    }

    .row-gap-xx-large {
        row-gap: 16rem;
    }
}