.nxb-grid-layout {
    --nxb-grid-background: #fff;
    --nxb-grid-colour: #222;
    --nxb-grid-row-gap: 2rem;
    --nxb-grid-column-gap: 2rem;
    box-sizing: border-box;
    background: var(--nxb-grid-background);
    color: var(--nxb-grid-colour);
}

.nxb-grid-layout--background-light-grey { --nxb-grid-background: #f3f4f6; }
.nxb-grid-layout--background-dark { --nxb-grid-background: #252525; --nxb-grid-colour: #fff; }
.nxb-grid-layout--background-brand { --nxb-grid-background: #e86513; --nxb-grid-colour: #fff; }

.nxb-grid-layout--top-no-spacing { padding-top: 0; }
.nxb-grid-layout--top-small { padding-top: 1.5rem; }
.nxb-grid-layout--top-medium { padding-top: 3rem; }
.nxb-grid-layout--top-large { padding-top: 5rem; }
.nxb-grid-layout--bottom-no-spacing { padding-bottom: 0; }
.nxb-grid-layout--bottom-small { padding-bottom: 1.5rem; }
.nxb-grid-layout--bottom-medium { padding-bottom: 3rem; }
.nxb-grid-layout--bottom-large { padding-bottom: 5rem; }

.nxb-grid-layout--row-gap-none { --nxb-grid-row-gap: 0; }
.nxb-grid-layout--row-gap-small { --nxb-grid-row-gap: 1rem; }
.nxb-grid-layout--row-gap-medium { --nxb-grid-row-gap: 2rem; }
.nxb-grid-layout--row-gap-large { --nxb-grid-row-gap: 4rem; }
.nxb-grid-layout--column-gap-none { --nxb-grid-column-gap: 0; }
.nxb-grid-layout--column-gap-small { --nxb-grid-column-gap: 1rem; }
.nxb-grid-layout--column-gap-medium { --nxb-grid-column-gap: 2rem; }
.nxb-grid-layout--column-gap-large { --nxb-grid-column-gap: 4rem; }

.nxb-grid-layout__inner {
    box-sizing: border-box;
    width: min(100% - 3rem, 72rem);
    margin-inline: auto;
}

.nxb-grid-layout--width-full-width .nxb-grid-layout__inner {
    width: 100%;
    padding-inline: 3rem;
}

.nxb-grid-layout > .nxb-grid-layout__inner > .umb-block-grid > .umb-block-grid__layout-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nxb-grid-row-gap);
}

.nxb-grid-layout > .nxb-grid-layout__inner > .umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item {
    min-width: 0;
}

.nxb-grid-layout__row > .umb-block-grid__area-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--nxb-grid-column-gap);
}

.nxb-grid-layout__row .umb-block-grid__area {
    display: flex;
    height: 100%;
    flex-direction: column;
    min-width: 0;
    grid-column-end: span min(
        var(--umb-block-grid--area-column-span, 12),
        var(--umb-block-grid--area-grid-columns, 12)
    );
}

.nxb-grid-layout__row--align-top > .umb-block-grid__area-container {
    align-items: start;
}

.nxb-grid-layout__row--align-centre > .umb-block-grid__area-container {
    align-items: center;
}

.nxb-grid-layout__row--align-bottom > .umb-block-grid__area-container {
    align-items: end;
}

.nxb-grid-layout__row--align-stretch > .umb-block-grid__area-container {
    align-items: stretch;
}

.nxb-grid-layout__row .umb-block-grid__area > .umb-block-grid__layout-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nxb-grid-row-gap);
    height: 100%;
}

.nxb-grid-layout__row .umb-block-grid__area .umb-block-grid__layout-item {
    min-width: 0;
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .nxb-grid-layout__inner {
        width: min(100% - 2rem, 72rem);
    }

    .nxb-grid-layout--width-full-width .nxb-grid-layout__inner {
        padding-inline: 1rem;
    }

    .nxb-grid-layout--top-large { padding-top: 3.5rem; }
    .nxb-grid-layout--bottom-large { padding-bottom: 3.5rem; }

    .nxb-grid-layout__row > .umb-block-grid__area-container {
        display: flex;
        flex-direction: column;
        gap: var(--nxb-grid-column-gap);
    }

    .nxb-grid-layout__row--reverse-mobile > .umb-block-grid__area-container {
        flex-direction: column-reverse;
    }

    .nxb-grid-layout__row .umb-block-grid__area {
        width: 100%;
    }
}