/* ==========================================================================
   Grid gap opties — uitbreiding op .grid-margin-x / .grid-margin-y
   --------------------------------------------------------------------------
   Gebruik:   <div class="grid-x grid-margin-x gap-small medium-gap-medium">
   Tokens:    gap-none | gap-tiny | gap-small | gap-medium | gap-large
   Prefixes:  (small) | medium- | large-
   Zonder gap-class blijft het bestaande gedrag (1.25rem / 1.875rem) intact.
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */
.grid-margin-x.gap-none, .grid-margin-y.gap-none {
    --gap:0rem
}

.grid-margin-x.gap-tiny, .grid-margin-y.gap-tiny {
    --gap:.3125rem
}

.grid-margin-x.gap-small, .grid-margin-y.gap-small {
    --gap:.625rem
}

.grid-margin-x.gap-medium, .grid-margin-y.gap-medium {
    --gap:1.25rem
}

.grid-margin-x.gap-large, .grid-margin-y.gap-large {
    --gap:1.875rem
}

/* 2. Horizontaal — small en op (fallback = 1.25rem)
   ========================================================================== */
.grid-margin-x[class*=gap-] {
    margin-left: calc(var(--gap, 1.25rem) / -2);
    margin-right:calc(var(--gap, 1.25rem) / -2)
}

.grid-margin-x[class*=gap-] > .cell {
    width: calc(100% - var(--gap, 1.25rem));
    margin-left: calc(var(--gap, 1.25rem) / 2);
    margin-right:calc(var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .auto, .grid-margin-x[class*=gap-] > .shrink {
    width:auto
}

.grid-margin-x[class*=gap-] > .small-1 {
    width:calc(8.3333333333% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-2 {
    width:calc(16.6666666667% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-3 {
    width:calc(25% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-4 {
    width:calc(33.3333333333% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-5 {
    width:calc(41.6666666667% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-6 {
    width:calc(50% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-7 {
    width:calc(58.3333333333% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-8 {
    width:calc(66.6666666667% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-9 {
    width:calc(75% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-10 {
    width:calc(83.3333333333% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-11 {
    width:calc(91.6666666667% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-] > .small-12 {
    width:calc(100% - var(--gap, 1.25rem))
}

/* Block grids */
.grid-margin-x[class*=gap-].small-up-1 > .cell {
    width:calc(100% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-].small-up-2 > .cell {
    width:calc(50% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-].small-up-3 > .cell {
    width:calc(33.3333333333% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-].small-up-4 > .cell {
    width:calc(25% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-].small-up-5 > .cell {
    width:calc(20% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-].small-up-6 > .cell {
    width:calc(16.6666666667% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-].small-up-7 > .cell {
    width:calc(14.2857142857% - var(--gap, 1.25rem))
}

.grid-margin-x[class*=gap-].small-up-8 > .cell {
    width:calc(12.5% - var(--gap, 1.25rem))
}

/* Offsets */
.grid-margin-x[class*=gap-] > .small-offset-0 {
    margin-left:calc(0% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-1 {
    margin-left:calc(8.3333333333% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-2 {
    margin-left:calc(16.6666666667% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-3 {
    margin-left:calc(25% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-4 {
    margin-left:calc(33.3333333333% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-5 {
    margin-left:calc(41.6666666667% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-6 {
    margin-left:calc(50% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-7 {
    margin-left:calc(58.3333333333% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-8 {
    margin-left:calc(66.6666666667% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-9 {
    margin-left:calc(75% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-10 {
    margin-left:calc(83.3333333333% + var(--gap, 1.25rem) / 2)
}

.grid-margin-x[class*=gap-] > .small-offset-11 {
    margin-left:calc(91.6666666667% + var(--gap, 1.25rem) / 2)
}

/* 3. Verticaal — small en op
   ========================================================================== */
.grid-margin-y[class*=gap-] {
    margin-top: calc(var(--gap, 1.25rem) / -2);
    margin-bottom:calc(var(--gap, 1.25rem) / -2)
}

.grid-margin-y[class*=gap-] > .cell {
    height: calc(100% - var(--gap, 1.25rem));
    margin-top: calc(var(--gap, 1.25rem) / 2);
    margin-bottom:calc(var(--gap, 1.25rem) / 2)
}

.grid-margin-y[class*=gap-] > .auto, .grid-margin-y[class*=gap-] > .shrink {
    height:auto
}

.grid-margin-y[class*=gap-] > .small-1 {
    height:calc(8.3333333333% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-2 {
    height:calc(16.6666666667% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-3 {
    height:calc(25% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-4 {
    height:calc(33.3333333333% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-5 {
    height:calc(41.6666666667% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-6 {
    height:calc(50% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-7 {
    height:calc(58.3333333333% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-8 {
    height:calc(66.6666666667% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-9 {
    height:calc(75% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-10 {
    height:calc(83.3333333333% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-11 {
    height:calc(91.6666666667% - var(--gap, 1.25rem))
}

.grid-margin-y[class*=gap-] > .small-12 {
    height:calc(100% - var(--gap, 1.25rem))
}

.grid-frame.grid-margin-y[class*=gap-] {
    height:calc(100vh + var(--gap, 1.25rem))
}

/* 4. Medium en op (fallback = 1.875rem)
   ========================================================================== */
@media print, screen and (min-width: 40em) {
    .grid-margin-x.medium-gap-none, .grid-margin-y.medium-gap-none {
        --gap:0rem
    }

    .grid-margin-x.medium-gap-tiny, .grid-margin-y.medium-gap-tiny {
        --gap:.3125rem
    }

    .grid-margin-x.medium-gap-small, .grid-margin-y.medium-gap-small {
        --gap:.625rem
    }

    .grid-margin-x.medium-gap-medium, .grid-margin-y.medium-gap-medium {
        --gap:1.25rem
    }

    .grid-margin-x.medium-gap-large, .grid-margin-y.medium-gap-large {
        --gap:1.875rem
    }

    .grid-margin-x[class*=gap-] {
        margin-left: calc(var(--gap, 1.875rem) / -2);
        margin-right:calc(var(--gap, 1.875rem) / -2)
    }

    .grid-margin-x[class*=gap-] > .cell {
        width: calc(100% - var(--gap, 1.875rem));
        margin-left: calc(var(--gap, 1.875rem) / 2);
        margin-right:calc(var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .auto, .grid-margin-x[class*=gap-] > .shrink, .grid-margin-x[class*=gap-] > .medium-auto, .grid-margin-x[class*=gap-] > .medium-shrink {
        width:auto
    }

    .grid-margin-x[class*=gap-] > .small-1, .grid-margin-x[class*=gap-] > .medium-1 {
        width:calc(8.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-2, .grid-margin-x[class*=gap-] > .medium-2 {
        width:calc(16.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-3, .grid-margin-x[class*=gap-] > .medium-3 {
        width:calc(25% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-4, .grid-margin-x[class*=gap-] > .medium-4 {
        width:calc(33.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-5, .grid-margin-x[class*=gap-] > .medium-5 {
        width:calc(41.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-6, .grid-margin-x[class*=gap-] > .medium-6 {
        width:calc(50% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-7, .grid-margin-x[class*=gap-] > .medium-7 {
        width:calc(58.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-8, .grid-margin-x[class*=gap-] > .medium-8 {
        width:calc(66.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-9, .grid-margin-x[class*=gap-] > .medium-9 {
        width:calc(75% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-10, .grid-margin-x[class*=gap-] > .medium-10 {
        width:calc(83.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-11, .grid-margin-x[class*=gap-] > .medium-11 {
        width:calc(91.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .small-12, .grid-margin-x[class*=gap-] > .medium-12 {
        width:calc(100% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].small-up-1 > .cell, .grid-margin-x[class*=gap-].medium-up-1 > .cell {
        width:calc(100% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].small-up-2 > .cell, .grid-margin-x[class*=gap-].medium-up-2 > .cell {
        width:calc(50% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].small-up-3 > .cell, .grid-margin-x[class*=gap-].medium-up-3 > .cell {
        width:calc(33.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].small-up-4 > .cell, .grid-margin-x[class*=gap-].medium-up-4 > .cell {
        width:calc(25% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].small-up-5 > .cell, .grid-margin-x[class*=gap-].medium-up-5 > .cell {
        width:calc(20% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].small-up-6 > .cell, .grid-margin-x[class*=gap-].medium-up-6 > .cell {
        width:calc(16.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].small-up-7 > .cell, .grid-margin-x[class*=gap-].medium-up-7 > .cell {
        width:calc(14.2857142857% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].small-up-8 > .cell, .grid-margin-x[class*=gap-].medium-up-8 > .cell {
        width:calc(12.5% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .medium-offset-0 {
        margin-left:calc(0% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-1 {
        margin-left:calc(8.3333333333% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-2 {
        margin-left:calc(16.6666666667% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-3 {
        margin-left:calc(25% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-4 {
        margin-left:calc(33.3333333333% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-5 {
        margin-left:calc(41.6666666667% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-6 {
        margin-left:calc(50% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-7 {
        margin-left:calc(58.3333333333% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-8 {
        margin-left:calc(66.6666666667% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-9 {
        margin-left:calc(75% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-10 {
        margin-left:calc(83.3333333333% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .medium-offset-11 {
        margin-left:calc(91.6666666667% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-y[class*=gap-] {
        margin-top: calc(var(--gap, 1.875rem) / -2);
        margin-bottom:calc(var(--gap, 1.875rem) / -2)
    }

    .grid-margin-y[class*=gap-] > .cell {
        height: calc(100% - var(--gap, 1.875rem));
        margin-top: calc(var(--gap, 1.875rem) / 2);
        margin-bottom:calc(var(--gap, 1.875rem) / 2)
    }

    .grid-margin-y[class*=gap-] > .auto, .grid-margin-y[class*=gap-] > .shrink, .grid-margin-y[class*=gap-] > .medium-auto, .grid-margin-y[class*=gap-] > .medium-shrink {
        height:auto
    }

    .grid-margin-y[class*=gap-] > .small-1, .grid-margin-y[class*=gap-] > .medium-1 {
        height:calc(8.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-2, .grid-margin-y[class*=gap-] > .medium-2 {
        height:calc(16.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-3, .grid-margin-y[class*=gap-] > .medium-3 {
        height:calc(25% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-4, .grid-margin-y[class*=gap-] > .medium-4 {
        height:calc(33.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-5, .grid-margin-y[class*=gap-] > .medium-5 {
        height:calc(41.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-6, .grid-margin-y[class*=gap-] > .medium-6 {
        height:calc(50% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-7, .grid-margin-y[class*=gap-] > .medium-7 {
        height:calc(58.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-8, .grid-margin-y[class*=gap-] > .medium-8 {
        height:calc(66.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-9, .grid-margin-y[class*=gap-] > .medium-9 {
        height:calc(75% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-10, .grid-margin-y[class*=gap-] > .medium-10 {
        height:calc(83.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-11, .grid-margin-y[class*=gap-] > .medium-11 {
        height:calc(91.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .small-12, .grid-margin-y[class*=gap-] > .medium-12 {
        height:calc(100% - var(--gap, 1.875rem))
    }

    .grid-frame.grid-margin-y[class*=gap-] {
        height:calc(100vh + var(--gap, 1.875rem))
    }
}

/* 5. Large en op (fallback = 1.875rem)
   ========================================================================== */
@media print, screen and (min-width: 64em) {
    .grid-margin-x.large-gap-none, .grid-margin-y.large-gap-none {
        --gap:0rem
    }

    .grid-margin-x.large-gap-tiny, .grid-margin-y.large-gap-tiny {
        --gap:.3125rem
    }

    .grid-margin-x.large-gap-small, .grid-margin-y.large-gap-small {
        --gap:.625rem
    }

    .grid-margin-x.large-gap-medium, .grid-margin-y.large-gap-medium {
        --gap:1.25rem
    }

    .grid-margin-x.large-gap-large, .grid-margin-y.large-gap-large {
        --gap:1.875rem
    }

    .grid-margin-x[class*=gap-] > .large-auto, .grid-margin-x[class*=gap-] > .large-shrink {
        width:auto
    }

    .grid-margin-x[class*=gap-] > .large-1 {
        width:calc(8.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-2 {
        width:calc(16.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-3 {
        width:calc(25% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-4 {
        width:calc(33.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-5 {
        width:calc(41.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-6 {
        width:calc(50% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-7 {
        width:calc(58.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-8 {
        width:calc(66.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-9 {
        width:calc(75% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-10 {
        width:calc(83.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-11 {
        width:calc(91.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-12 {
        width:calc(100% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].large-up-1 > .cell {
        width:calc(100% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].large-up-2 > .cell {
        width:calc(50% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].large-up-3 > .cell {
        width:calc(33.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].large-up-4 > .cell {
        width:calc(25% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].large-up-5 > .cell {
        width:calc(20% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].large-up-6 > .cell {
        width:calc(16.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].large-up-7 > .cell {
        width:calc(14.2857142857% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-].large-up-8 > .cell {
        width:calc(12.5% - var(--gap, 1.875rem))
    }

    .grid-margin-x[class*=gap-] > .large-offset-0 {
        margin-left:calc(0% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-1 {
        margin-left:calc(8.3333333333% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-2 {
        margin-left:calc(16.6666666667% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-3 {
        margin-left:calc(25% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-4 {
        margin-left:calc(33.3333333333% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-5 {
        margin-left:calc(41.6666666667% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-6 {
        margin-left:calc(50% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-7 {
        margin-left:calc(58.3333333333% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-8 {
        margin-left:calc(66.6666666667% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-9 {
        margin-left:calc(75% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-10 {
        margin-left:calc(83.3333333333% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-x[class*=gap-] > .large-offset-11 {
        margin-left:calc(91.6666666667% + var(--gap, 1.875rem) / 2)
    }

    .grid-margin-y[class*=gap-] > .large-auto, .grid-margin-y[class*=gap-] > .large-shrink {
        height:auto
    }

    .grid-margin-y[class*=gap-] > .large-1 {
        height:calc(8.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-2 {
        height:calc(16.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-3 {
        height:calc(25% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-4 {
        height:calc(33.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-5 {
        height:calc(41.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-6 {
        height:calc(50% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-7 {
        height:calc(58.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-8 {
        height:calc(66.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-9 {
        height:calc(75% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-10 {
        height:calc(83.3333333333% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-11 {
        height:calc(91.6666666667% - var(--gap, 1.875rem))
    }

    .grid-margin-y[class*=gap-] > .large-12 {
        height:calc(100% - var(--gap, 1.875rem))
    }
}