:where(body) {


    /* Grid */

    .grid {
        display: grid;
    }

    .grid-col-2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-col-1-2 {
        grid-template-columns: 1fr 2fr;
    }

    .grid-col-auto-auto {
        grid-template-columns: auto auto;
    }

    .grid-col-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-area-same {
        grid-template-areas: 'sameArea';

        & > * {
            grid-area: sameArea;
        }
    }

    /* Flex */

    .flex {
        display: flex;
    }

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

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

    .flex-wrap {
        flex-wrap: wrap;
    }

    /* Shared */

    .gap-1 {
        gap: 1rem;
    }
    .gap-1-5 {
        gap: 1.5rem;
    }

    .gap-2 {
        gap: 2rem;
    }

    .gap-4 {
        gap: 4rem;
    }

    .gap-6 {
        gap: 6rem;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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