/*  UTLITIES: LAYOUT
//////////////////////////////////////////////////////////////////////////////*/

@layer utilities {
    .visuallyhidden:not(:focus):not(:active),
    .invisible:not(:focus):not(:active) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .hidden,
    [hidden] {
        display: none;
    }
    .grid-row-1 {
        grid-row: 1;
    }

    .nowrap {
        white-space: nowrap;
    }

    .display-block {
        display: block;
    }
    .display-flex {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-direction-column {
        flex-direction: column;
    }
    .gap-m {
        gap: var(--spacing-m);
    }
    .column-gap-m {
        column-gap: var(--spacing-m);
    }
    .row-gap-s {
        row-gap: var(--spacing-s);
    }
    .row-gap-xs {
        row-gap: var(--spacing-xs);
    }
    @media (min-width: 640px) {
        .column-start-1 {
            grid-column-start: 1;
        }
        .column-start-2 {
            grid-column-start: 2;
        }
        .column-start-3 {
            grid-column-start: 3;
        }
        .column-start-4 {
            grid-column-start: 4;
        }
        .column-start-5 {
            grid-column-start: 5;
        }
        .column-start-6 {
            grid-column-start: 6;
        }
        .column-start-7 {
            grid-column-start: 7;
        }
        .column-start-8 {
            grid-column-start: 8;
        }
        .column-start-9 {
            grid-column-start: 9;
        }
        .column-start-10 {
            grid-column-start: 10;
        }
        .column-start-11 {
            grid-column-start: 11;
        }
        .column-start-12 {
            grid-column-start: 12;
        }
        .column-end-1 {
            grid-column-end: 1;
        }
        .column-end-2 {
            grid-column-end: 2;
        }
        .column-end-3 {
            grid-column-end: 3;
        }
        .column-end-4 {
            grid-column-end: 4;
        }
        .column-end-5 {
            grid-column-end: 5;
        }
        .column-end-6 {
            grid-column-end: 6;
        }
        .column-end-7 {
            grid-column-end: 7;
        }
        .column-end-8 {
            grid-column-end: 8;
        }
        .column-end-9 {
            grid-column-end: 9;
        }
        .column-end-10 {
            grid-column-end: 10;
        }
        .column-end-11 {
            grid-column-end: 11;
        }
        .column-end-12 {
            grid-column-end: 12;
        }
        .column-end-13 {
            grid-column-end: 13;
        }
        .column-end-14 {
            grid-column-end: 14;
        }
        .column-end-15 {
            grid-column-end: 15;
        }
        .fullscreen {
            grid-column: 1 /-1;
        }
    }

    .vertically-centered {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .vertically-centered > *:last-child {
        margin-bottom: 0;
    }
    .gap-xs {
        gap: var(--spacing-xs);
    }
    .space-between {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
    }
    .justify-content-bottom {
        display: flex;
        flex-direction: column;
        justify-content: end;
        height: fit-content;
        margin-top: auto;
    }
    .justify-content-top {
        display: flex;
        flex-direction: column;
        justify-content: start;
        height: fit-content;
        margin-bottom: auto;
    }
    .justify-content-center {
        justify-content: center;
    }
    .justify-content-end {
        justify-content: end;
    }

    .columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--size-gap);
    }
    .column {
        position: relative;
    }
    .columns.border-between > .column:first-of-type::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background: var(--color-grey-100);
    }
    .columns-1-3 {
        grid-template-columns: 1fr 3fr;
    }
    .columns-1-4 {
        grid-template-columns: 80px 1fr;
    }
    .columns:not(:last-of-type) {
        margin-bottom: var(--spacing-m);
    }

    .row-1 {
        grid-row: 1;
    }
    .column-span-2 {
        grid-column: span 2;
    }

    .column-span-3 {
        grid-column: span 3;
    }
    .column-span-4 {
        grid-column: span 4;
    }
    .column-span-5 {
        grid-column: span 5;
    }
    .column-span-6 {
        grid-column: span 6;
    }
    .column-span-7 {
        grid-column: span 7;
    }
    .column-span-8 {
        grid-column: span 8;
    }
    .column-span-9 {
        grid-column: span 9;
    }
    .column-span-10 {
        grid-column: span 10;
    }
    .column-span-11 {
        grid-column: span 11;
    }
    .column-span-12 {
        grid-column: span 12;
    }
    .column-span-13 {
        grid-column: span 13;
    }
    .column-span-14 {
        grid-column: span 14;
    }

    @media (max-width: 960px) {
        .hide-on-mobile {
            display: none;
        }
    }
}