:root {
    /*    --lacour-background-color-grey-light: #E6E6E6;
    --lacour-background-color-grey-lighter: #F0F0F0;*/
    /*    --lacour-background-color-grey-light: #f1f1f1;
    --lacour-background-color-grey-lighter: #f9f9f9;*/
    --lacour-background-color-grey-light: #f0f0f0;
    --lacour-background-color-grey-lighter: #f7f7f7;
    --lacour-background-color-white: #FFFFFF;
    --lacour-color-grey-light: #B2B2B2;
    --lacour-color-green: #19E6A9;
    --lacour-color-red: #E02B4F;
    /*    --lacour-color-blue: #0D4E9C;
    --lacour-color-dark-blue: #001B42;*/
    --lacour-color-blue: #005ECF;
    --lacour-color-dark-blue: #001D3E;
    --lacour-color-orange: #FF870F;
    --lacour-color-purple: #564DFF;
    --lacour-color-selected: #E5EFFA;
    --lacour-color-selected-label: #9EBEEC;
    --lacour-padding: 8px 0;
    --lacour-padding-value: 12px;
    --lacour-padding-double-value: calc(var(--lacour-padding-value) * 2);
    --lacour-padding-half-value: calc(var(--lacour-padding-value) / 2);
    --lacour-gap-value: 16px;
    --lacour-gap-double-value: calc(var(--lacour-gap-value) * 2);
    --lacour-gap-half-value: calc(var(--lacour-gap-value) / 2);
    --lacour-radius-value: 12px;
    --lacour-radius-half-value: calc(var(--lacour-radius-value) / 2);
}

@font-face {
    font-family: 'Inter';
    src: url('../../fonts/InterVariable.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
    font-weight: normal;
    font-style: normal;
}

/****GLOBAL****/
body#DEPTMod {
    background-color: var(--lacour-background-color-grey-light);
    font-family: "Inter","Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

    body#DEPTMod .container-page {
        padding: 0 var(--lacour-padding-double-value);
    }
    /* #region HEADER */
    body#DEPTMod #divHeader {
        display: none;
    }

    body#DEPTMod #divHeader2 {
        height: 40px;
        padding: 5px;
        display: flex;
        background: #ffffff91;
        border-bottom: 2px solid rgb(from var(--lacour-color-dark-blue) r g b / 50%);
    }

        body#DEPTMod #divHeader2 #LogoMosaic {
            height: 100% !important;
            width: auto !important;
        }

    body#DEPTMod header nav {
        background-color: inherit !important;
    }

        body#DEPTMod header nav #navbarConnect {
            background-color: var(--lacour-background-color-grey-lighter);
            border: none;
            border-radius: var(--lacour-padding-double-value);
            max-width: 166px !important;
            text-overflow: ellipsis;
        }

            body#DEPTMod header nav #navbarConnect:first-child {
                width: 100%;
            }

                body#DEPTMod header nav #navbarConnect:first-child > span > span:first-child {
                    font-weight: 500;
                }

                body#DEPTMod header nav #navbarConnect:first-child > span > span:nth-child(2) {
                    color: var(--lacour-color-grey-light) !important;
                }

            body#DEPTMod header nav #navbarConnect span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: unset !important;
            }

            body#DEPTMod header nav #navbarConnect + ul {
                margin-top: var(--lacour-padding-half-value);
            }

                body#DEPTMod header nav #navbarConnect + ul,
                body#DEPTMod header nav #navbarConnect + ul ul {
                    background: var(--lacour-background-color-grey-lighter);
                    border-radius: 4px !important;
                    border: none;
                    padding: 0;
                }

                    body#DEPTMod header nav #navbarConnect + ul > li.dropdown-divider {
                        display: none;
                    }

                    body#DEPTMod header nav #navbarConnect + ul > li > a,
                    body#DEPTMod header nav #navbarConnect + ul > li:has(:not(a)) {
                        padding: var(--lacour-gap-value);
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }

                    body#DEPTMod header nav #navbarConnect + ul ul li {
                        padding: 8px;
                    }


    body#DEPTMod #nav-nveau {
        width: 200px !important;
        margin-bottom: 0 !important;
    }

        body#DEPTMod #nav-nveau span {
            position: relative;
        }

            body#DEPTMod #nav-nveau span i {
                position: absolute;
            }

                body#DEPTMod #nav-nveau span i:first-child {
                    top: -2px;
                }

                body#DEPTMod #nav-nveau span i:last-child {
                    top: -1px;
                }

    body#DEPTMod .page-header {
        border-bottom: none;
        margin-top: 0;
        padding-bottom: 0;
    }

        body#DEPTMod .page-header h1 {
            padding-bottom: 0 !important;
            margin-bottom: 0;
            top: 0 !important;
        }
    /* #region Bouton Nouveau Dossier */
    body#DEPTMod #navbar-principal .btn-dept {
        margin-right: var(--lacour-padding-half-value);
    }

        body#DEPTMod #navbar-principal .btn-dept .fa-stack-sm {
            position: relative;
            height: 1em;
            width: 1em;
            vertical-align: middle;
            line-height: 1.25em;
        }

            body#DEPTMod #navbar-principal .btn-dept .fa-stack-sm .fa-stack-2x {
                font-size: 1rem;
            }

            body#DEPTMod #navbar-principal .btn-dept .fa-stack-sm .fa-stack-1x {
                font-size: 0.5rem;
            }

        body#DEPTMod #navbar-principal .btn-dept .fa {
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    /* #endregion*/
    /* #endregion */

    /* #region CARD LACOUR */
    body#DEPTMod .cardLacour {
        background-color: var(--lacour-background-color-white) !important;
        border-radius: var(--lacour-radius-value) !important;
        padding: var(--lacour-gap-value) var(--lacour-padding-double-value) !important;
        width: 100% !important;
        margin: var(--lacour-padding-double-value) 0 !important;
        position: relative;
    }

        body#DEPTMod .cardLacour h3,
        body#DEPTMod .cardLacour h4,
        body#DEPTMod .cardLacour h5 {
            text-align: left !important;
            margin: 0 !important;
            padding: var(--lacour-padding);
            color: var(--lacour-color-blue);
            font-size: 1.3em !important;
        }

        body#DEPTMod .cardLacour .card-header {
            display: flex;
            justify-content: space-between;
        }

            body#DEPTMod .cardLacour .card-header .fa-arrow-circle-right {
                transform: rotate(-45deg);
            }
    /* #endregion */
    /* #region CARD LACOUR  Outlined */
    body#DEPTMod .cardOutlinedLacour {
        border: 1px solid var( --lacour-color-grey-light);
        border-radius: var( --lacour-padding-value);
        padding: var(--lacour-gap-value);
        display: grid;
        align-items: start;
        grid-template-rows: auto 1fr;
        grid-row-gap: var(--lacour-gap-value);
    }

        body#DEPTMod .cardOutlinedLacour .card-header {
            color: var(--lacour-color-blue);
            display: flex;
            margin-left: var(--lacour-gap-half-value); /* � cause de la modale label*/
        }

            body#DEPTMod .cardOutlinedLacour .card-header:has(> :last-child:nth-child(2)) {
                justify-content: space-between;
            }

            body#DEPTMod .cardOutlinedLacour .card-header span i.fa {
                color: var(--lacour-color-dark-blue);
                font-size: 1rem !important;
            }
    /* #endregion */

    /* #region BADGE */
    body#DEPTMod .badge.text-bg-primary {
        color: var(--lacour-color-blue) !important;
        background-color: rgb(from var(--lacour-color-blue) r g b / 10%) !important;
    }

    body#DEPTMod .badge.text-bg-danger {
        color: #E02B4F !important;
        background-color: #FCEAED !important;
    }

    body#DEPTMod .badge.text-bg-secondary {
        color: #66768E !important;
        background-color: RGBA(102, 118, 142, 0.1) !important;
    }

    body#DEPTMod .badge.text-bg-success {
        color: var(--lacour-color-green) !important;
        background-color: #E8FCF6 !important;
    }

    body#DEPTMod .badge.text-bg-info {
        color: RGB(13, 202, 240) !important;
        background-color: RGBA(13, 202, 240, 0.1) !important;
    }

    body#DEPTMod .badge.rounded-pill {
        border-radius: 6px !important
    }
    /* #endregion */

    /* #region COLOR */
    body#DEPTMod .lacour-text-dark-blue {
        color: var(--lacour-color-dark-blue) !important;
    }

    body#DEPTMod .lacour-text-green {
        color: var(--lacour-color-green) !important;
    }

    body#DEPTMod .lacour-text-grey-light {
        color: var(--lacour-color-grey-light) !important;
    }

    body#DEPTMod input:not(.no-shadow) {
        box-shadow: none !important;
    }

    body#DEPTMod .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
        border-right: 0;
    }

    body#DEPTMod input:focus,
    body#DEPTMod input:focus ~ .input-group-text,
    body#DEPTMod .input-group-text:has(~ input:focus) {
        border-color: var(--lacour-color-blue) !important;
    }

    body#DEPTMod .has-invalid input:invalid,
    body#DEPTMod .has-invalid input:invalid ~ .input-group-text {
        border-color: var(--bs-danger) !important;
    }

    body#DEPTMod input:disabled:not([type=checkbox]),
    body#DEPTMod input:disabled:not([type=checkbox]) + .input-group-text {
        background: #e9ecef;
    }
    /* cause de l'image du check blanc de bootstrap */
    body#DEPTMod input[type=checkbox]:disabled,
    body#DEPTMod input[type=checkbox]:disabled + .input-group-text {
        background-color: var(--lacour-color-dark-blue);
    }

    body#DEPTMod .input-group-text {
        background: var(--lacour-background-color-white);
    }

    body#DEPTMod input ~ .input-group-text {
        border-left: 0;
    }

    body#DEPTMod .input-group-text.p-0 {
        padding: 0 var(--lacour-padding-half-value) !important;
    }
    /* #endregion */

    /* #region INPUT */
    body#DEPTMod input:not([type=search]) {
        padding: var(--lacour-gap-half-value);
    }

    body#DEPTMod .recipient-select-search input {
        padding-left: 2rem !important;
    }

    body#DEPTMod .input-group {
        flex-wrap: nowrap;
    }

        body#DEPTMod .input-group button.btn-primary {
            background: var(--lacour-color-blue);
        }

        body#DEPTMod .input-group button:not(.btn-primary, .btn-warning):has(i.fa) {
            border-left: 0 !important;
            background: transparent;
        }
    /* #endregion */
    /* #region BUTTONS */
    body#DEPTMod .btn-dept,
    body#DEPTMod .btn-dept-icon {
        border-radius: 40px !important;
        width: auto !important;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* Boutons avec des ic�nes */
        /* Enlever au passage � FontAwesome 7 la notion de bi */
        body#DEPTMod .btn-dept:has(i.fa, span i.fa, i.bi, img) {
            /*width: 160px;*/
            /*display: grid;*/
            display: flex;
            /*grid-template-columns: auto auto;*/
            column-gap: var(--lacour-padding-half-value);
        }

        /* Boutons ic�ne */
        body#DEPTMod .btn-dept-icon i.fa {
            width: 1.28571429em;
            text-align: center;
        }

        body#DEPTMod .btn-dept.btn-primary {
            background: var(--lacour-color-blue) !important;
        }

        body#DEPTMod .btn-dept.btn-outline-primary {
            color: var(--lacour-color-blue) !important;
            border-color: var(--lacour-color-blue) !important;
        }

            body#DEPTMod .btn-dept.btn-outline-primary:hover {
                color: #fff !important;
                background: var(--lacour-color-blue) !important;
            }

    /* #endregion*/
    /* #region Case � cocher*/
    /* .yesno => objet avec contours et changement de couleurs */
    /* .yesno.yesno-no-bg => checkbox basique (voir � la fin de la r�gion)*/
    body#DEPTMod .yesno * {
        cursor: pointer !important;
    }

    body#DEPTMod .yesno:not(.yesno-no-bg) label:has(.fa-square-o, .fa-check-square) {
        border-color: var(--lacour-background-color-grey-light);
    }

    body#DEPTMod .yesno:not(.yesno-no-bg) label:has(.fa-square-o) {
        background: var(--lacour-background-color-white);
    }

    body#DEPTMod .yesno:not(.yesno-no-bg) label:has(.fa-check-square) {
        background: var(--lacour-color-selected);
    }

    body#DEPTMod .yesno:not(.yesno-no-bg) label,
    body#DEPTMod .yesno:not(.yesno-no-bg) label i.fa-square-o,
    body#DEPTMod .yesno:not(.yesno-no-bg) label i.fa-check-square {
        color: black !important;
    }

    body#DEPTMod .yesno label {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        border-radius: var(--lacour-radius-half-value);
        align-items: center;
    }

        body#DEPTMod .yesno label:has(span.yesno-label) {
            grid-template-columns: auto 1fr;
        }

        body#DEPTMod .yesno label:has(table) {
            grid-template-columns: auto 1fr;
            grid-template-rows: repeat(2, auto);
            grid-row-gap: var(--lacour-padding-half-value);
        }

        body#DEPTMod .yesno label .fa {
            grid-area: 1 / 1 / 3 / 2;
            place-self: center;
            margin: 2px var(--lacour-padding-half-value);
        }

        body#DEPTMod .yesno label > * {
            justify-self: start;
            align-self: center;
        }

        body#DEPTMod .yesno label span.yesno-label {
            padding-left: var(--lacour-padding-half-value);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: unset !important;
            max-width: 100%;
        }

        body#DEPTMod .yesno label table {
            border-spacing: var(--lacour-padding-half-value) 0;
            border-collapse: separate;
        }
    /* Surcharge pour le checkbox basique */
    body#DEPTMod .yesno.yesno-no-bg label {
        padding: 0;
        color: var(--lacour-color-dark-blue);
    }

        body#DEPTMod .yesno.yesno-no-bg label:hover,
        body#DEPTMod .yesno.yesno-no-bg label.active:hover,
        body#DEPTMod .yesno.yesno-no-bg label:active:hover,
        body#DEPTMod .yesno.yesno-no-bg label:active:focus,
        body#DEPTMod .yesno.yesno-no-bg label.active:focus,
        body#DEPTMod .yesno.yesno-no-bg label:focus,
        body#DEPTMod .yesno.yesno-no-bg label.active.focus {
            background: none;
            border: none;
        }

        body#DEPTMod .yesno.yesno-no-bg label span.yesno-label {
            padding-left: 0;
            padding-right: 5px; /* pour afficher la fin des mots */
        }
    /* #endregion */

    /* #region SELECT */
    body#DEPTMod .multiselect-selected-text {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

        body#DEPTMod .multiselect-selected-text::after {
            position: static;
        }

    body#DEPTMod .dropdown-item.active, .dropdown-item:active {
        background-color: var(--lacour-color-blue);
    }

    body#DEPTMod .bootstrap-select .dropdown-toggle {
        height: 100% !important;
    }

        body#DEPTMod .bootstrap-select .dropdown-toggle:focus {
            outline: none !important;
        }
    /*#endregion  */
    /* #region SELECT WITHOUT BORDERS */
    body#DEPTMod .select-dept.select-dept-w-o-borders ~ div .multiselect,
    body#DEPTMod .select-dept.select-dept-w-o-borders select ~ button {
        outline: none !important;
        border: none;
        padding: var(--lacour-padding-half-value) !important;
    }

        body#DEPTMod .select-dept.select-dept-w-o-borders ~ div .multiselect span {
            display: flex;
            align-items: center;
        }

            body#DEPTMod .select-dept.select-dept-w-o-borders ~ div.multiselect span::after {
                margin-left: var(--lacour-padding-half-value);
            }

    body#DEPTMod .form-select:focus {
        box-shadow: none;
    }

    body#DEPTMod .select-dept.select-dept-w-o-borders ~ div .multiselect-container.dropdown-menu .form-check-input[type=checkbox] {
        border-color: var(--lacour-color-dark-blue) !important;
    }

    body#DEPTMod .select-dept.select-dept-w-o-borders ~ div .multiselect-container.dropdown-menu li.multiselect-group-option-indented,
    body#DEPTMod .select-dept.select-dept-w-o-borders ~ div .multiselect-container.dropdown-menu li.active,
    body#DEPTMod .select-dept.select-dept-w-o-borders ~ div .multiselect-container.dropdown-menu li {
        padding-top: var(--lacour-padding-half-value) !important;
        padding-bottom: var(--lacour-padding-half-value) !important;
        padding-right: var(--lacour-padding-half-value) !important;
    }

    body#DEPTMod .select-dept.select-dept-w-o-borders ~ div .multiselect-container.dropdown-menu .multiselect-group.dropdown-item-text {
        padding: var(--lacour-padding-value) !important;
    }
    /* #endregion */

    /* #region CALENDAR */
    body#DEPTMod .calendar-dept ~ span:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback),
    body#DEPTMod form #dates .cardLacour div > div > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
        margin-left: -1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        width: auto !important;
    }
/* #endregion */
/* #region DatePickers */
.form-row.overflow-auto:has(.bootstrap-datetimepicker-widget) {
    overflow: visible !important;
}
/* #endregion */


body#DEPTMod .label-titre {
    font-variant-caps: normal;
    color: var(--lacour-color-blue);
}
/* #region Utilities */
.row-col-half-gap {
    column-gap: var(--lacour-padding-half-value);
    row-gap: var(--lacour-padding-half-value);
}

.row-col-gap {
    column-gap: var(--lacour-padding-value);
    row-gap: var(--lacour-padding-value);
}

body#DEPTMod .text-primary {
    color: var(--lacour-color-blue);
}
/* #endregion */
/* #region TABLE */
body#DEPTMod table.table-lacour {
    width: 100%;
    border-spacing: 0 8px;
    border-collapse: separate;
}

    body#DEPTMod table.table-lacour thead tr th,
    body#DEPTMod table.table-lacour tbody tr td {
        padding: var(--lacour-padding-value) var(--lacour-padding-half-value);
        vertical-align: middle;
    }

    body#DEPTMod table.table-lacour thead tr th {
        color: rgba(0,0,0,0.5);
        font-weight: normal;
        border-bottom: 0;
    }

    body#DEPTMod table.table-lacour tbody tr {
        background-color: #FFFFFF;
        border-radius: var(--lacour-radius-half-value);
    }

        body#DEPTMod table.table-lacour tbody tr td:first-child {
            border-radius: var(--lacour-radius-half-value) 0 0 var(--lacour-radius-half-value);
        }

        body#DEPTMod table.table-lacour tbody tr td:nth-last-child(1 of :not(.hidden)),
        body#DEPTMod table.table-lacour tbody tr td:nth-last-child(1 of :not(.d-none)) {
            border-radius: 0 var(--lacour-radius-half-value) var(--lacour-radius-half-value) 0;
        }

body#DEPTMod table button.delete-line {
    border: none;
    background: transparent;
}

    body#DEPTMod table button.delete-line:hover {
        color: darkred;
    }

body#DEPTMod table td:has(button.delete-line) {
    vertical-align: baseline;
}
/* #endregion */
/* #region TABLE V2 */
body#DEPTMod table.table-dept {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin-bottom: 0;
}

    body#DEPTMod table.table-dept thead > tr,
    body#DEPTMod table.table-dept th,
    body#DEPTMod table.table-dept td {
        text-align: left !important;
        border-color: #cccccc;
    }

    body#DEPTMod table.table-dept thead > tr {
        border-width: 0 !important;
    }

        body#DEPTMod table.table-dept thead > tr > th {
            border-bottom-width: 0 !important;
            box-shadow: none !important;
        }

    body#DEPTMod table.table-dept tbody > tr > td {
        border-top-width: 1px;
        padding: 0.5rem;
    }

        body#DEPTMod table.table-dept tbody > tr > td input {
            padding: var(--lacour-padding-half-value);
        }

    body#DEPTMod table.table-dept tbody > tr td:first-child {
        border-radius: var(--lacour-padding-half-value) 0 0 var(--lacour-padding-half-value);
        border-left-width: 1px;
    }

    body#DEPTMod table.table-dept tbody > tr td:nth-last-child(1 of :not(.hidden)) {
        border-radius: 0 var(--lacour-padding-half-value) var(--lacour-padding-half-value) 0;
        border-right-width: 1px;
    }
/* #endregion */
/* #region MODAL */
body#DEPTMod .modal-popup .modal-content {
    padding: var(--lacour-gap-value) var(--lacour-gap-half-value);
    border-radius: var(--lacour-radius-value);
}

    body#DEPTMod .modal-popup .modal-content .modal-header {
        background: none;
        padding-bottom: 0;
    }

        body#DEPTMod .modal-popup .modal-content .modal-header :is(h3, h4, h5) {
            padding: 0 8px;
            border-bottom: 2px solid var(--lacour-color-blue) !important
        }

        body#DEPTMod .modal-popup .modal-content .modal-header .modal-title {
            color: initial !important;
        }
/* #endregion */
/* #region MODAL V2 */
body#DEPTMod .modal-dept .modal-content {
    padding: var(--lacour-padding-double-value);
}

body#DEPTMod .modal-dept .modal-content,
body#DEPTMod .modal-dept .modal-body,
body#DEPTMod .modal-dept .modal-grid-dept {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(2, auto);
    grid-column-gap: var(--lacour-gap-value);
    grid-row-gap: var(--lacour-gap-value);
}

body#DEPTMod .modal-dept .modal-header,
body#DEPTMod .modal-dept .modal-body,
body#DEPTMod .modal-dept .modal-footer {
    padding: 0;
}

body#DEPTMod .modal-dept .modal-body-icon {
    max-width: unset !important;
    justify-content: flex-start;
    align-items: baseline;
    column-gap: var(--lacour-padding-value);
}
/* #endregion */
/* #region Liste des dossiers */

body#DEPTMod #folder-list-alerts {
    column-gap: var(--lacour-gap-value);
}

    body#DEPTMod #folder-list-alerts .cardLacour {
        margin: 0;
    }

    body#DEPTMod #folder-list-alerts .affichagedossier {
        display: block !important;
    }

body#DEPTMod #FilterList {
    background: none;
}

    body#DEPTMod #FilterList #filtres,
    body#DEPTMod #FilterList #filtres > div {
        padding: 0 !important;
    }

    body#DEPTMod #FilterList #search_input {
        border-radius: 0 var(--lacour-gap-double-value) var(--lacour-gap-double-value) 0;
        border-left: 0;
    }

    body#DEPTMod #FilterList #ValueCodepostal {
        border-radius: var(--lacour-gap-double-value);
    }

    body#DEPTMod #FilterList .input-group-text:has(~ #search_input) {
        border-right: 0;
        border-radius: var(--lacour-gap-double-value) 0 0 var(--lacour-gap-double-value);
    }

    body#DEPTMod #FilterList #filtre-date {
        background: white;
        border-radius: 8px;
        /*        padding: var(--lacour-padding-half-value);*/
        padding: 8px;
        max-width: 500px;
    }

    body#DEPTMod #FilterList div:not(#filtre-date) button {
        padding: var(--lacour-padding-value);
        border-color: white;
    }

    body#DEPTMod #FilterList:not(.reception-filters) > #filtres-container > form #filtres {
        gap: var(--lacour-gap-half-value);
    }

        body#DEPTMod #FilterList:not(.reception-filters) > #filtres-container > form #filtres .filtre button.multiselect {
            height: 100%;
        }


    /* Dates */
    body#DEPTMod #FilterList #filtre-date,
    body#DEPTMod #FilterList #filtre-date .d-flex {
        grid-column-gap: var(--lacour-gap-value);
    }

        body#DEPTMod #FilterList #filtre-date input,
        body#DEPTMod #FilterList #filtre-date input ~ .input-group-append,
        body#DEPTMod #FilterList #filtre-date button {
            padding: 4px var(--lacour-padding-half-value) !important;
        }

/* Multiselect dans le tableau */
body#DEPTMod table#tableDossier .divSelectShareOnListFolder .multiselect {
    max-width: 250px;
}

    body#DEPTMod table#tableDossier .divSelectShareOnListFolder .multiselect span::after {
        position: static;
    }

body#DEPTMod #FolderTable .table-footer {
    justify-content: center;
}

/* #region Surcharge code */
body#DEPTMod #FilterList:not(.reception-filters) > #filtres-container > form #filtres .filtre button.multiselect {
    width: auto;
}

body#DEPTMod table#tableDossier:not(.table-reception) td[data-column-id='2'] {
    width: fit-content;
}
/* #endregion */
/* #region TABLE */
body#DEPTMod table#tableDossier td.delete-column {
    display: table-cell;
}


/* #endregion*/
/* #endregion */
/* #region DOSSIER */
body#DEPTMod form .form-group, body#DEPTMod form #dates .input-form {
    margin: var(--lacour-padding-half-value) 0;
}

@media (max-width: 768px) {
    body#DEPTMod form#EditionDossier #dossier {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) {
    body#DEPTMod form#EditionDossier #dossier {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 0.5fr 1fr 0.5fr;
    }
}

body#DEPTMod form#EditionDossier #dossier > div {
    width: 100%;
}

body#DEPTMod form #dates .cardLacour {
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

@media (max-width: 991px) {
    body#DEPTMod form #dates .cardLacour {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto 1fr !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body#DEPTMod form #dates .cardLacour {
        grid-auto-flow: column;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
    }
}

@media (min-width: 1200px) {
    body#DEPTMod form #dates .cardLacour {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto 1fr !important;
    }
}


body#DEPTMod form #dates .cardLacour div {
    overflow: unset !important;
}


body#DEPTMod form #dates .cardLacour > div > div > div {
    width: 100% !important;
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: 1fr auto;
}

body#DEPTMod form #dates .cardLacour input {
    min-width: 140px !important;
    width: -webkit-fill-available !important;
}

body#DEPTMod form #dates .cardLacour *:first-child {
    grid-area: 1 / 1 / 2 / 5;
}

body#DEPTMod form #dates .cardLacour div:not(.bootstrap-datetimepicker-widget, .bootstrap-datetimepicker-widget > div.row, .bootstrap-datetimepicker-widget div.datepicker) {
    width: 100% !important;
}

body#DEPTMod form #dates .cardLacour div.form-group > div {
    display: flex;
}

body#DEPTMod form #dates .cardLacour div.form-group input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* #endregion */
/* #region HEADER */
body#DEPTMod #details #actions {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--lacour-gap-value);
}

    body#DEPTMod #details #actions ~ hr {
        display: none;
    }

    body#DEPTMod #showTagsButton,
    body#DEPTMod #details #actions #ech > #navbar-echanges > ul > li,
    body#DEPTMod #details #actions .navbar-collapse > ul > li {
        margin: 0;
    }

    body#DEPTMod #details #actions .navbar-collapse > ul {
        column-gap: var(--lacour-gap-half-value);
        row-gap: var(--lacour-gap-half-value);
    }

    body#DEPTMod #details #actions p {
        display: none;
    }

body#DEPTMod #displayDetails {
    background-color: inherit !important;
}

    body#DEPTMod #displayDetails nav .nav-tabs,
    body#DEPTMod #EditionDossier nav .nav-tabs {
        justify-content: inherit;
        padding: 0 var(--lacour-padding-double-value);
        font-weight: 600;
    }

        body#DEPTMod #displayDetails nav .nav-tabs button,
        body#DEPTMod #EditionDossier nav .nav-tabs button {
            flex-grow: inherit !important;
            min-width: inherit !important;
        }

            body#DEPTMod #displayDetails nav .nav-tabs button > i,
            body#DEPTMod #EditionDossier nav .nav-tabs button > i {
                display: none;
            }

            body#DEPTMod #displayDetails nav .nav-tabs button.active,
            body#DEPTMod #displayDetails nav .nav-tabs button:hover,
            body#DEPTMod #EditionDossier nav .nav-tabs button.active,
            body#DEPTMod #EditionDossier nav .nav-tabs button:hover {
                background-color: inherit !important;
                color: black !important;
            }

            body#DEPTMod #displayDetails nav .nav-tabs button span span:not(#nb_doc) {
                color: var(--lacour-color-grey-light);
            }

            body#DEPTMod #displayDetails nav .nav-tabs button span,
            body#DEPTMod #EditionDossier nav .nav-tabs button span {
                font-size: 14px !important;
            }
    /* #endregion */
    /* #region TABS */
    body#DEPTMod #displayDetails .tab-content .cardLacour .card {
        border: none;
        padding: 0 8px;
    }

        body#DEPTMod #displayDetails .tab-content .cardLacour .card .card-body {
            padding: 0;
        }

    body#DEPTMod #displayDetails .tab-content .cardLacour table .text-center {
        text-align: inherit !important;
    }

    body#DEPTMod #displayDetails .tab-content .cardLacour table thead tr:first-child {
        color: var(--lacour-color-blue);
        font-style: italic;
    }

    body#DEPTMod #displayDetails .tab-content .cardLacour table tr th,
    body#DEPTMod #displayDetails .tab-content .cardLacour table tr td {
        padding: var(--lacour-padding) !important;
    }

    body#DEPTMod #displayDetails .tab-content .cardLacour .list-group .list-group-item {
        background-color: inherit;
        padding: var(--lacour-padding);
    }

    body#DEPTMod #displayDetails .tab-content .cardLacour .card .card-body i.fa {
        color: var(--lacour-color-blue);
    }

body#DEPTMod #EditionDossier label.fw-bold {
    font-weight: 500 !important;
}
/* #endregion */
/* #region DOSSIER */
/* #region DOSSIER Main */
body#DEPTMod #displayDetails .tab-content #tab0default .module-card {
    box-shadow: inherit;
    margin: inherit;
}

body#DEPTMod #displayDetails .tab-content #tab0default .col-sm-6 .cardLacour h3 {
    color: inherit;
}

body#DEPTMod #displayDetails .tab-content #tab0default .module-card .float-container,
body#DEPTMod #displayDetails .tab-content #tab0default .module-card .float-icon {
    display: none;
}

body#DEPTMod #displayDetails .tab-content #tab0default .module-card .float-desc {
    margin-left: inherit;
}

body#DEPTMod #displayDetails .tab-content #tab0default .module-card .mt-4 {
    margin-top: 0 !important;
}

body#DEPTMod #displayDetails .tab-content #tab0default .module-card .text-center {
    text-align: inherit !important;
}

body#DEPTMod #displayDetails .tab-content #tab0default .module-card .actor-details li i {
    color: var(--lacour-color-blue);
}

body#DEPTMod #displayDetails .tab-content #tab0default .col-sm-4 .cardLacour h3 {
    color: var(--lacour-color-blue);
}

body#DEPTMod #displayDetails .tab-content #tab0default #SendDigicarLinkButton {
    border-radius: 50px;
}

body#DEPTMod form#EditionDossier .card-shadow-light {
    box-shadow: none;
}

body#DEPTMod #displayDetails .tab-content #tab0default #dossierDetails2 .cardLacour {
    margin: 0 !important;
}

@media (max-width : 992px) {
    body#DEPTMod #displayDetails .tab-content #tab0default.active, body#DEPTMod #displayDetails .tab-content #tab0default #dossierDetails, body#DEPTMod #displayDetails .tab-content #tab0default #dossierDetails2 {
        display: flex;
        flex-direction: column;
        row-gap: var(--lacour-gap-value);
    }

        body#DEPTMod #displayDetails .tab-content #tab0default #dossierDetails2 .col-sm-4,
        body#DEPTMod #displayDetails .tab-content #tab0default #dossierDetails .col-sm-6 {
            width: 100% !important;
        }

        body#DEPTMod #displayDetails .tab-content #tab0default #dossierDetails .cardLacour,
        body#DEPTMod #displayDetails .tab-content #tab0default #dossierDetails2 .cardLacour {
            margin: 0 !important;
        }
}
/* #endregion */
/* #region ASSURE */
body#DEPTMod #displayDetails .tab-content #tab2default .cardLacour .card .card-body h5 i {
    display: none;
}

body#DEPTMod form#EditionDossier #assure2 label:not(.btn) {
    font-weight: 500 !important;
}

body#DEPTMod form#EditionDossier #forAdresse1 {
    margin-top: 0 !important;
}

body#DEPTMod form#EditionDossier #assure0 {
    width: 100% !important;
}

body#DEPTMod form#EditionDossier #assure1 {
    display: none !important;
}
/* ne fonctionne pas � revoir (et mettre un position relative au dessus */
/*    body#DEPTMod form#EditionDossier div#forConducteur_Assur� {
        position: absolute;
        top: var(--lacour-padding-value);
        right: var(--lacour-padding-value);
    }*/
/* #endregion */
/* #region ASSURANCE */

body#DEPTMod .insurance-details {
    margin-top: var(--lacour-padding-double-value);
}

    body#DEPTMod .insurance-details .cardLacour {
        margin: 0 !important;
    }

body#DEPTMod #displayDetails .tab-content #tab3default .cardLacour table tr td:last-child {
    text-align: right;
}

body#DEPTMod #displayDetails .tab-content #tab3default #calculation-elements-table {
    width: 100%;
    max-width: 100%;
}

    body#DEPTMod #displayDetails .tab-content #tab3default #calculation-elements-table .cardLacour .card-body {
        overflow: auto;
    }

    body#DEPTMod #displayDetails .tab-content #tab3default #calculation-elements-table .cardLacour table tr th,
    body#DEPTMod #displayDetails .tab-content #tab3default #calculation-elements-table .cardLacour table tr td {
        padding: var(--lacour-gap-half-value) !important;
    }


        body#DEPTMod #displayDetails .tab-content #tab3default #calculation-elements-table .cardLacour table tr th:not(:last-child),
        body#DEPTMod #displayDetails .tab-content #tab3default #calculation-elements-table .cardLacour table tr td:not(:last-child) {
            border-right: solid 1px var(--lacour-color-blue);
        }

    body#DEPTMod #displayDetails .tab-content #tab3default #calculation-elements-table .cardLacour table tr td {
        white-space: nowrap;
    }

body#DEPTMod form#EditionDossier #forCalculationElementsTable table tr:first-child th {
    font-style: italic;
    color: var(--lacour-color-blue);
}
/* #endregion */
/* #region TARIFS */
body#DEPTMod #displayDetails .tab-content #tab9default .cardLacour table tr th {
    font-weight: normal !important;
}

    body#DEPTMod #displayDetails .tab-content #tab9default .cardLacour table tr th:not(:first-child),
    body#DEPTMod #displayDetails .tab-content #tab9default .cardLacour table tr td:not(:first-child) {
        text-align: right !important;
    }

    body#DEPTMod #displayDetails .tab-content #tab9default .cardLacour table tr th.text-start,
    body#DEPTMod #displayDetails .tab-content #tab9default .cardLacour table tr.table-discount-block th {
        padding: var(--lacour-gap-value) var(--lacour-gap-double-value) !important;
    }

body#DEPTMod #voirTarif > table > thead > tr > th,
body#DEPTMod #voirTarif > table > tbody > tr > td.row-title,
body#DEPTMod .tarif-details > table > thead > tr > th,
body#DEPTMod .tarif-details > table > tbody > tr > td.row-title,
body#DEPTMod #checkPricingCondition > table > thead > tr > th,
body#DEPTMod #checkPricingCondition > table > tbody > tr > td.row-title,
body#DEPTMod #voirTarif > table > tbody > tr:first-of-type > td > div.col-title,
body#DEPTMod .tarif-details > table > tbody > tr:first-of-type > td > div.col-title,
body#DEPTMod #checkPricingCondition > table > tbody > tr:first-of-type > td > div.col-title
body#DEPTMod #voirDEB > table > tbody > tr:first-of-type > td > div.col-title.tauxRemise {
    font-variant-caps: normal;
    font-size: 14px !important;
    color: black !important;
}

    body#DEPTMod #voirTarif > table > thead > tr > th:first-of-type,
    body#DEPTMod .tarif-details > table > thead > tr > th:first-of-type,
    body#DEPTMod #checkPricingCondition > table > thead > tr > th:first-of-type {
        font-weight: normal;
        font-style: italic;
        color: var(--lacour-color-blue) !important;
    }

body#DEPTMod #EditionDossier .cardLacour table tr:first-child {
    color: var(--lacour-color-blue) !important;
}

body#DEPTMod form#EditTarif #forT_Opaque,
body#DEPTMod form#EditTarif #forT_Vernis,
body#DEPTMod form#EditTarif #forT_Nacre,
body#DEPTMod form#EditTarif [id^="forT_Empty"],
body#DEPTMod form#EditTarif [id^="forT_Taux"],
body#DEPTMod form#EditTarif [id^="forT_Rm"],
body#DEPTMod form#EditPricingCondition #forT_Opaque,
body#DEPTMod form#EditPricingCondition #forT_Vernis,
body#DEPTMod form#EditPricingCondition #forT_Nacre,
body#DEPTMod form#EditPricingCondition [id^="forT_Empty"],
body#DEPTMod form#EditPricingCondition [id^="forT_Taux"],
body#DEPTMod form#EditPricingCondition [id^="forT_Rm"] {
    margin-bottom: 0 !important;
}

body#DEPTMod #ModalTarif .modal-body {
    padding: 0 !important;
}

    body#DEPTMod #ModalTarif .modal-body .cardLacour {
        margin-top: 0 !important;
        padding: 0 !important;
    }

body#DEPTMod #tarifs0 #forListeTarifs,
body#DEPTMod #tarifs0 #forEditTarifClient,
body#DEPTMod #tarifs0 #forBtnWorkTariff {
    display: flex;
    justify-content: center;
}

    body#DEPTMod #tarifs0 #forListeTarifs .filter-option {
        display: flex;
        align-items: center;
    }

body#DEPTMod #voirTarif #AssuranceAlreadyHaveTarif table tr td span,
body#DEPTMod #CodeTarif span {
    font-variant-caps: normal !important;
}
/* #endregion */
/* #region EXPERT */
body#DEPTMod #displayDetails .tab-content #tab4default .cardLacour {
    margin: 0 !important;
}

body#DEPTMod #displayDetails .tab-content #tab4default .row > div {
    margin: var(--lacour-padding-double-value) 0 !important;
}

body#DEPTMod #displayDetails .tab-content #tab4default .col-xs-12 {
    width: 100% !important;
    padding: 0;
}

    body#DEPTMod #displayDetails .tab-content #tab4default .col-xs-12 .cardLacour {
        margin: 0 !important;
    }

body#DEPTMod #displayDetails .tab-content #tab4default .cardLacour #Expert_Service,
body#DEPTMod #displayDetails .tab-content #tab4default .cardLacour #Expert_NationalID,
body#DEPTMod #displayDetails .tab-content #tab4default .cardLacour #Expert_CollaboratorCode {
    color: var(--lacour-color-blue);
}

    body#DEPTMod #displayDetails .tab-content #tab4default .cardLacour #Expert_Service span,
    body#DEPTMod #displayDetails .tab-content #tab4default .cardLacour #Expert_NationalID span,
    body#DEPTMod #displayDetails .tab-content #tab4default .cardLacour #Expert_CollaboratorCode span {
        color: initial;
    }

@media (max-width: 992px) {
    body#DEPTMod form#EditionDossier #expert {
        display: flex;
        flex-direction: column;
        row-gap: var(--lacour-padding-double-value);
    }

        body#DEPTMod form#EditionDossier #expert > div {
            width: 100%;
        }

            body#DEPTMod form#EditionDossier #expert > div .cardLacour {
                margin: 0 !important;
            }
}
/* #endregion */
/* #region VEHICULE */
@media (max-width: 992px) {
    body#DEPTMod form#EditionDossier #vehicule {
        flex-direction: column;
    }

        body#DEPTMod form#EditionDossier #vehicule > .col-md-8,
        body#DEPTMod form#EditionDossier #vehicule > .col-md-4 {
            width: 100% !important;
        }
}

body#DEPTMod #displayDetails .tab-content #tab5default > div > h4 {
    display: none;
}

body#DEPTMod #displayDetails .tab-content #tab5default .cardLacour table tr td:last-child {
    text-align: right;
}

body#DEPTMod form#EditionDossier #vehicule0 > div:first-child > div:last-child > div:last-child {
    display: block;
}

@media all and (min-width: 992px) {
    body#DEPTMod form#EditionDossier #vehicule0 {
        border-right: none;
        padding-right: var(--lacour-padding-value);
    }

    body#DEPTMod #tab5default #vehicleDetails .div1 {
        grid-area: 1 / 1 / 2 / 3;
    }
}

@media (max-width: 992px) {
    body#DEPTMod #tab5default #vehicleDetails ~ div .cardLacour {
        margin-top: var(--lacour-gap-value);
        margin-bottom: 0 !important;
    }

    body#DEPTMod #displayDetails #vehicleDetails2 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {


    body#DEPTMod #displayDetails #vehicleDetails2 {
        grid-template-columns: 1fr 1fr;
    }

        body#DEPTMod #displayDetails #vehicleDetails2 .cardLacour {
            margin: 0 !important;
        }

        body#DEPTMod #displayDetails #vehicleDetails2 .div1 {
            grid-area: 1 / 1 / 2 / 2;
        }

        body#DEPTMod #displayDetails #vehicleDetails2 .div2 {
            grid-area: 1 / 2 / 3 / 3;
        }

        body#DEPTMod #displayDetails #vehicleDetails2 .div3 {
            grid-area: 2 / 1 / 3 / 2;
        }

        body#DEPTMod #displayDetails #vehicleDetails2 .div4 {
            grid-area: 3 / 1 / 4 / 3;
        }
}

@media (max-width: 1200px) {

    body#DEPTMod #displayDetails .tab-content #tab5default > div > h4 ~ div.row {
        display: grid;
        row-gap: var(--lacour-gap-value);
    }

    body#DEPTMod #tab5default #vehicleDetails ~ div {
        width: 100%;
        display: grid;
    }

    body#DEPTMod #tab5default > div > div {
        display: grid;
        width: 100%;
    }

    body#DEPTMod #tab5default #vehicleDetails {
        width: 100% !important;
    }

    body#DEPTMod #displayDetails #vehicleDetails2 {
        display: grid;
        grid-auto-flow: row;
        grid-column-gap: var(--lacour-gap-value);
        grid-row-gap: var(--lacour-gap-value);
    }

        body#DEPTMod #displayDetails #vehicleDetails2 .cardLacour {
            margin: 0 !important;
        }
}

@media (min-width: 1200px) {
    body#DEPTMod #displayDetails .tab-content #tab5default #vehicleDetails2 {
        padding-left: var(--lacour-padding-double-value);
    }
}

body#DEPTMod #displayDetails #vehicleDetails {
    display: grid;
    grid-column-gap: var(--lacour-gap-value);
    grid-row-gap: var(--lacour-gap-value);
    align-items: stretch;
    margin-top: var(--lacour-padding-double-value);
    padding: 0;
}

body#DEPTMod #displayDetails #vehicleDetails2 {
    padding: 0;
}

@media all and (min-width: 992px) {
    body#DEPTMod #displayDetails #vehicleDetails > div:first-child {
        grid-area: 1 / 1 / 2 / 3;
    }
}

body#DEPTMod #displayDetails #vehicleDetails .cardLacour {
    margin: 0 !important;
}

body#DEPTMod #displayDetails #vehicleDetails #double-table {
    align-items: start;
    column-gap: var(--lacour-gap-double-value);
}

body#DEPTMod #displayDetails #vehicleDetails .cells {
    display: flex;
    justify-content: space-between;
    padding: var(--lacour-gap-half-value) 0;
    border-top: 1px solid #dee2e6;
}

body#DEPTMod #displayDetails #vehicleDetails table {
    margin-bottom: 0;
}

/*Un label equipement */
body#DEPTMod #kilometrage > div > .cardLacour:nth-child(3) > label {
    display: none;
}
/* #endregion */
/* #region DEVIS */
body#DEPTMod #displayDetails .tab-content #tab6default #devisContainer .accordion-item {
    border: none;
    margin: 8px 0;
}

    body#DEPTMod #displayDetails .tab-content #tab6default #devisContainer .accordion-item .accordion-header .accordion-button {
        box-shadow: none;
        color: initial !important;
    }

        body#DEPTMod #displayDetails .tab-content #tab6default #devisContainer .accordion-item .accordion-header .accordion-button::after {
            margin-left: var(--lacour-gap-value);
        }

    body#DEPTMod #displayDetails .tab-content #tab6default #devisContainer .accordion-item .accordion-collapse {
        border: 1px solid #001B4233;
        border-radius: var(--lacour-radius-half-value) !important;
        padding: var(--lacour-padding);
        margin-top: 4px;
    }

    body#DEPTMod #displayDetails .tab-content #tab6default #devisContainer .accordion-item .card-footer {
        background-color: inherit;
        border: none;
        padding: inherit;
    }

        body#DEPTMod #displayDetails .tab-content #tab6default #devisContainer .accordion-item .card-footer > div > .btn {
            border-radius: 40px;
        }

/* #endregion */
/* #region DOCUMENTS */
body#DEPTMod #displayDetails .tab-content #tab7default .documents-header {
    padding: var(--lacour-padding);
}

    body#DEPTMod #displayDetails .tab-content #tab7default .documents-header h4,
    body#DEPTMod #displayDetails .tab-content #tab7default .documents-header .me-3,
    body#DEPTMod #displayDetails .tab-content #tab7default .documents-header hr,
    body#DEPTMod #displayDetails .tab-content #tab7default #docs-dossier #checkbox-picture-all-onglet {
        display: none !important;
    }

    body#DEPTMod #displayDetails .tab-content #tab7default .documents-header .pictures-actions {
        border: none;
        margin: 0;
        padding: 0;
    }

        body#DEPTMod #displayDetails .tab-content #tab7default .documents-header .pictures-actions .ia-btn .btn,
        body#DEPTMod #displayDetails .tab-content #tab7default .documents-header .pictures-actions .documents-actions .btn {
            border-radius: 40px;
        }

body#DEPTMod #displayDetails .tab-content #tab7default .cardLacour.own-gallery h5,
body#DEPTMod #displayDetails .tab-content #tab7default .cardLacour.other-gallery h5,
body#DEPTMod #displayDetails .tab-content #tab7default .cardLacour.doc-gallery h5,
body#DEPTMod #displayDetails .tab-content #tab7default .cardLacour.other-doc-gallery h5 {
    background-color: inherit;
    border: inherit;
    border-radius: inherit;
    font-size: initial;
}

body#DEPTMod #displayDetails .tab-content #tab7default #docs-dossier > div {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body#DEPTMod #displayDetails .tab-content #tab7default #docs-dossier #docs-text {
    border: none;
    margin-left: 2em !important
}

    body#DEPTMod #displayDetails .tab-content #tab7default #docs-dossier #docs-text ul li {
        padding: var(--lacour-gap-value) 0;
    }

        body#DEPTMod #displayDetails .tab-content #tab7default #docs-dossier #docs-text ul li a {
            color: initial;
        }

        body#DEPTMod #displayDetails .tab-content #tab7default #docs-dossier #docs-text ul li > span {
            float: right;
        }
/* #region MODALE Ajout Documents */
@media screen and (min-width: 769px) {
    body#DEPTMod #AddDocuments .d-grid {
        column-gap: var(--lacour-padding-value);
    }
}

@media screen and (max-width: 768px) {
    body#DEPTMod #AddDocuments .d-grid {
        grid-template-rows: 1fr 1fr 1fr;
        row-gap: var(--lacour-padding-value);
    }
}

body#DEPTMod #AddDocuments div.btn {
    border-color: var(--lacour-background-color-grey-light);
    color: black;
}

body#DEPTMod #AddDocuments button.btn {
    border-radius: 40px;
}
/* #endregion */
/* #region Modale AutoSnap */
body#DEPTMod #ModalConfirmationAutoSnap .modal-dialog {
    min-width: 50%;
}

body#DEPTMod #ModalComplementAutoSnap .modal-dialog {
    min-width: 75%;
}

body#DEPTMod #ModalComplementAutoSnap .modal-body:nth-child(2) {
    height: 75vh;
}

body#DEPTMod .autosnap .form-group {
    margin: 0;
}

body#DEPTMod .autosnap form {
    row-gap: var(--lacour-gap-value);
    column-gap: var(--lacour-gap-value);
}

body#DEPTMod .autosnap [id^='forAutoSnapContextes_'],
body#DEPTMod .autosnap [id^='forComplementAutoSnap_'] {
    padding: 0;
}

body#DEPTMod .autosnap .yesno label table .Proprietaire {
    border-radius: 8px;
}

body#DEPTMod .autosnap .yesno label .Proprietaire {
    color: var(--lacour-color-blue);
    border: 1px solid transparent !important;
    background-color: rgb(from var(--lacour-color-blue) r g b / 10%) !important;
}

body#DEPTMod .autosnap .yesno label:has(.fa-check-square) .Proprietaire {
    border: 1px solid var(--lacour-color-blue) !important;
    color: var(--lacour-color-dark-blue);
    background-color: rgb(from var(--lacour-color-selected-label) r g b / 30%) !important;
}

body#DEPTMod .autosnap .yesno label .DOM {
    color: var(--lacour-color-green);
    border: 1px solid transparent !important;
    background-color: rgb(from var(--lacour-color-green) r g b / 10%) !important;
}

body#DEPTMod .autosnap .yesno label .INFO {
    color: var(--lacour-color-dark-blue);
    border: 1px solid transparent !important;
    background-color: rgb(from var(--lacour-color-dark-blue) r g b / 10%) !important;
}

body#DEPTMod .autosnap .yesno label .PIEC {
    color: var(--lacour-color-purple);
    border: 1px solid transparent !important;
    background-color: rgb(from var(--lacour-color-purple) r g b / 10%) !important;
}

body#DEPTMod .autosnap .yesno label .VGE {
    color: var(--lacour-color-orange);
    border: 1px solid transparent !important;
    background-color: rgb(from var(--lacour-color-orange) r g b / 10%) !important;
}

body#DEPTMod .autosnap .yesno label .DOC {
    color: var(--lacour-color-red);
    border: 1px solid transparent !important;
    background-color: rgb(from var(--lacour-color-red) r g b / 10%) !important;
}

body#DEPTMod .autosnap .COMP {
    background-color: #9f3b3b !important;
}
/* #endregion */
/* #endregion */
/* #region ECHANGES */
body#DEPTMod #displayDetails .tab-content #tab8default .cardLacour {
    border: none;
}

    body#DEPTMod #displayDetails .tab-content #tab8default .cardLacour .card-header {
        cursor: inherit;
        border: none;
        margin: 0;
        padding: 0 !important;
    }

    body#DEPTMod #displayDetails .tab-content #tab8default .cardLacour #PanelSaisieReponse .card-body {
        padding: 0;
    }

        body#DEPTMod #displayDetails .tab-content #tab8default .cardLacour #PanelSaisieReponse .card-body .container-fluid {
            padding: 8px;
        }

            body#DEPTMod #displayDetails .tab-content #tab8default .cardLacour #PanelSaisieReponse .card-body .container-fluid label {
                font-weight: normal !important;
            }

body#DEPTMod #displayDetails .tab-content #tab8default > hr {
    display: none;
}

body#DEPTMod #displayDetails .tab-content #tab8default #tableEchange th, body#DEPTMod #displayDetails .tab-content #tab8default #tableEchange td {
    text-align: left !important;
}
/* #endregion */
/* #region CONTROLES */
body#DEPTMod #displayDetails .tab-content #tab1default .accordion-item {
    border: none;
    margin: 8px 0;
}

    body#DEPTMod #displayDetails .tab-content #tab1default .accordion-item .accordion-header .accordion-button {
        box-shadow: none;
        color: initial !important;
    }

        body#DEPTMod #displayDetails .tab-content #tab1default .accordion-item .accordion-header .accordion-button::after {
            margin-left: var(--lacour-gap-value);
        }

    body#DEPTMod #displayDetails .tab-content #tab1default .accordion-item .accordion-collapse {
        border-radius: var(--lacour-radius-half-value) !important;
        padding: var(--lacour-padding);
        margin-top: 4px;
    }
/* #endregion */
/* #region EDITION */
body#DEPTMod #EditionDossier div > div > div.card {
    background: none;
}

body#DEPTMod #EditionDossier nav .nav-tabs button {
    padding: 8px;
}
/* #endregion */
/* #region DIVA */

body#DEPTMod #ModalChiffrage > .modal-dialog > .modal-content > #chiffrageContainer-Modal {
    max-height: 100dvh !important;
}
/*    body#DEPTMod #ModalChiffrage > .modal-dialog > .modal-content > #chiffrageContainer-Modal footer {
        background: #eeeeee;
    }*/


body#DEPTMod #ModalChiffrage #LogoMosaicChiffrage {
    /*  position: absolute;*/
    /*    height: 20px;*/
    /*left: 0;*/
    max-width: 100%;
    max-height: 100%;
}

body#DEPTMod #ModalChiffrage footer {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 4fr 1fr;
    align-items: center;
}

body#DEPTMod #IRISEstimate {
    padding-bottom: 0 !important;
}

body#DEPTMod.apple #IRISEstimate {
    height: 93dvh !important;
}

body#DEPTMod #voirTarif > table > tbody > tr > td > div:not(.col-title),
body#DEPTMod #voirTarif > table > tbody > tr > td#DAP,
body#DEPTMod #voirTarif > table > tbody > tr > td#DSP,
body#DEPTMod #voirTarif > table#voirRemisesPied > tbody > tr > td,
body#DEPTMod .tarif-details > table > tbody > tr > td > div:not(.col-title),
body#DEPTMod .tarif-details > table > tbody > tr > td#DAP,
body#DEPTMod .tarif-details > table > tbody > tr > td#DSP,
body#DEPTMod .tarif-details > table#voirRemisesPied > tbody > tr > td,
body#DEPTMod #checkPricingCondition > table > tbody > tr > td > div:not(.col-title),
body#DEPTMod #checkPricingCondition > table > tbody > tr > td#DAP,
body#DEPTMod #checkPricingCondition > table > tbody > tr > td#DSP,
body#DEPTMod #checkPricingCondition > table#voirRemisesPied > tbody > tr > td {
    font-family: Inter;
}

body#DEPTMod #details footer #buttons-footer button {
    max-width: inherit;
    min-width: inherit;
    margin: 0 !important;
}

body#DEPTMod #ModalTarifChiffrage .modal-body {
    padding: var(--lacour-padding-double-value) var(--lacour-padding-double-value) 0 var(--lacour-padding-double-value);
}

    body#DEPTMod #ModalTarifChiffrage .modal-body .cardLacour {
        margin: 0 !important;
        padding: 0 !important;
    }

        body#DEPTMod #ModalTarifChiffrage .modal-body .cardLacour h4 {
            display: none;
        }


body#DEPTMod #PDFModalForm input[type="checkbox"] {
    display: none;
}

@media (min-width: 576px) {
    body#DEPTMod #ModelLoader .modal-dialog {
        max-width: 80vw !important;
    }
}

@media (min-width: 768px) {
    body#DEPTMod #ModelLoader .modal-dialog .two-columns-force {
        grid-template-columns: auto 1fr;
    }
}

body#DEPTMod #PDFModalForm .panel-estimates {
    margin: 0;
}

body#DEPTMod #PDFModalForm .nav-tabs a {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    color: black !important;
}

    body#DEPTMod #PDFModalForm .nav-tabs a.active {
        border-bottom: 2px solid var(--lacour-color-blue);
    }

body#DEPTMod .modal3 {
    background: none;
}
/* #endregion */
/* #region  Sinistre / Garantie */
body#DEPTMod #forDARVAInvoice {
    padding-top: 0 !important;
}

body#DEPTMod #rub_6 #estimation {
    width: 50%;
}

@media (max-width : 992px) {
    body#DEPTMod #rub_6 #estimation {
        width: 100%;
    }
}

/* #endregion */
/* #region DARVA */
body#DEPTMod #EditionDossier .btn-add-toad {
    top: var(--lacour-padding-value);
}
/* #endregion */
/* #endregion */
/* #region Labels */
body#DEPTMod #templateTag {
    column-gap: var(--lacour-gap-value);
}
/* #endregion */

/* #region Surcharge */

body#DEPTMod .modal-popup .modal-body .modal-body-icon .fa-question-circle,
body#DEPTMod .modal-popup .modal-body .modal-body-icon .fa-clock-o,
body#DEPTMod .modal-popup .modal-body .modal-body-icon .fa-info-circle {
    color: var(--lacour-color-blue);
}

body#DEPTMod .gallery-box > .checkboxMove label input[type="checkbox"]:checked + .cr,
body#DEPTMod #checkbox-picture-all > label input[type="checkbox"]:checked + .cr,
body#DEPTMod #checkbox-picture-all-onglet > label input[type="checkbox"]:checked + .cr {
    background: var(--lacour-color-blue);
}
/* #region Small caps */
body#DEPTMod #voirTarif > table, .tarif-details > table,
body#DEPTMod #checkPricingCondition > table,
body#DEPTMod #voirTarif > table > caption, .tarif-details > table > caption,
body#DEPTMod #checkPricingCondition > table > caption,
body#DEPTMod #voirTarif > table > thead > tr > th,
body#DEPTMod #voirTarif > table > tbody > tr > td.row-title,
body#DEPTMod .tarif-details > table > thead > tr > th,
body#DEPTMod .tarif-details > table > tbody > tr > td.row-title,
body#DEPTMod #checkPricingCondition > table > thead > tr > th,
body#DEPTMod #checkPricingCondition > table > tbody > tr > td.row-title,
body#DEPTMod #voirTarif > div h4,
body#DEPTMod #voirTarif #AssuranceAlreadyHaveTarif table tr td span {
    font-variant-caps: normal !important;
}
/* #endregion */


body#DEPTMod #IAbtn > button {
    line-height: 18px;
}


body#DEPTMod #send-direct input {
    padding: .375rem .75rem !important;
}
/* #endregion */
/* #region GRID mixin */
.grid {
    display: grid !important
}

.inline-grid {
    display: inline-grid
}

    .grid.one-row, .inline-grid.one-row {
        grid-template-rows: 1fr
    }

    .grid.two-columns, .inline-grid.two-columns {
        grid-template-columns: repeat(2,1fr)
    }

.one-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(1,minmax(0,1fr))
}

    .one-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .one-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .one-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .one-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .one-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .one-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .one-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .one-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .one-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .one-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .one-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .one-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .one-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .one-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .one-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .one-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .one-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .one-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .one-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .one-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .one-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .one-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .one-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .one-columns > .span-h-12 {
        grid-row-end: span 12
    }

.two-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(2,minmax(0,1fr))
}

    .two-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .two-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .two-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .two-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .two-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .two-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .two-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .two-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .two-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .two-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .two-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .two-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .two-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .two-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .two-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .two-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .two-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .two-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .two-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .two-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .two-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .two-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .two-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .two-columns > .span-h-12 {
        grid-row-end: span 12
    }

.three-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(3,minmax(0,1fr))
}

    .three-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .three-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .three-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .three-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .three-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .three-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .three-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .three-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .three-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .three-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .three-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .three-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .three-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .three-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .three-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .three-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .three-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .three-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .three-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .three-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .three-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .three-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .three-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .three-columns > .span-h-12 {
        grid-row-end: span 12
    }

.four-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(4,minmax(0,1fr))
}

    .four-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .four-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .four-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .four-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .four-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .four-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .four-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .four-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .four-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .four-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .four-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .four-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .four-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .four-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .four-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .four-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .four-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .four-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .four-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .four-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .four-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .four-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .four-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .four-columns > .span-h-12 {
        grid-row-end: span 12
    }

.five-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(5,minmax(0,1fr))
}

    .five-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .five-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .five-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .five-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .five-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .five-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .five-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .five-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .five-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .five-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .five-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .five-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .five-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .five-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .five-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .five-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .five-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .five-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .five-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .five-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .five-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .five-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .five-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .five-columns > .span-h-12 {
        grid-row-end: span 12
    }

.six-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(6,minmax(0,1fr))
}

    .six-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .six-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .six-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .six-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .six-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .six-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .six-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .six-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .six-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .six-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .six-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .six-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .six-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .six-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .six-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .six-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .six-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .six-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .six-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .six-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .six-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .six-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .six-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .six-columns > .span-h-12 {
        grid-row-end: span 12
    }

.seven-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(7,minmax(0,1fr))
}

    .seven-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .seven-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .seven-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .seven-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .seven-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .seven-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .seven-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .seven-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .seven-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .seven-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .seven-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .seven-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .seven-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .seven-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .seven-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .seven-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .seven-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .seven-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .seven-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .seven-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .seven-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .seven-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .seven-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .seven-columns > .span-h-12 {
        grid-row-end: span 12
    }

.eight-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(8,minmax(0,1fr))
}

    .eight-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .eight-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .eight-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .eight-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .eight-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .eight-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .eight-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .eight-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .eight-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .eight-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .eight-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .eight-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .eight-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .eight-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .eight-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .eight-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .eight-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .eight-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .eight-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .eight-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .eight-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .eight-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .eight-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .eight-columns > .span-h-12 {
        grid-row-end: span 12
    }

.nine-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(9,minmax(0,1fr))
}

    .nine-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .nine-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .nine-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .nine-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .nine-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .nine-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .nine-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .nine-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .nine-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .nine-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .nine-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .nine-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .nine-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .nine-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .nine-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .nine-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .nine-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .nine-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .nine-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .nine-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .nine-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .nine-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .nine-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .nine-columns > .span-h-12 {
        grid-row-end: span 12
    }

.ten-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(10,minmax(0,1fr))
}

    .ten-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .ten-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .ten-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .ten-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .ten-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .ten-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .ten-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .ten-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .ten-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .ten-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .ten-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .ten-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .ten-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .ten-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .ten-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .ten-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .ten-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .ten-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .ten-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .ten-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .ten-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .ten-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .ten-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .ten-columns > .span-h-12 {
        grid-row-end: span 12
    }

.eleven-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(11,minmax(0,1fr))
}

    .eleven-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .eleven-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .eleven-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .eleven-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .eleven-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .eleven-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .eleven-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .eleven-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .eleven-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .eleven-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .eleven-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .eleven-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .eleven-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .eleven-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .eleven-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .eleven-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .eleven-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .eleven-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .eleven-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .eleven-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .eleven-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .eleven-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .eleven-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .eleven-columns > .span-h-12 {
        grid-row-end: span 12
    }

.twelve-columns {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(12,minmax(0,1fr))
}

    .twelve-columns > .span-w-1 {
        grid-column-end: span 1
    }

    .twelve-columns > .span-w-2 {
        grid-column-end: span 2
    }

    .twelve-columns > .span-w-3 {
        grid-column-end: span 3
    }

    .twelve-columns > .span-w-4 {
        grid-column-end: span 4
    }

    .twelve-columns > .span-w-5 {
        grid-column-end: span 5
    }

    .twelve-columns > .span-w-6 {
        grid-column-end: span 6
    }

    .twelve-columns > .span-w-7 {
        grid-column-end: span 7
    }

    .twelve-columns > .span-w-8 {
        grid-column-end: span 8
    }

    .twelve-columns > .span-w-9 {
        grid-column-end: span 9
    }

    .twelve-columns > .span-w-10 {
        grid-column-end: span 10
    }

    .twelve-columns > .span-w-11 {
        grid-column-end: span 11
    }

    .twelve-columns > .span-w-12 {
        grid-column-end: span 12
    }

    .twelve-columns > .span-h-1 {
        grid-row-end: span 1
    }

    .twelve-columns > .span-h-2 {
        grid-row-end: span 2
    }

    .twelve-columns > .span-h-3 {
        grid-row-end: span 3
    }

    .twelve-columns > .span-h-4 {
        grid-row-end: span 4
    }

    .twelve-columns > .span-h-5 {
        grid-row-end: span 5
    }

    .twelve-columns > .span-h-6 {
        grid-row-end: span 6
    }

    .twelve-columns > .span-h-7 {
        grid-row-end: span 7
    }

    .twelve-columns > .span-h-8 {
        grid-row-end: span 8
    }

    .twelve-columns > .span-h-9 {
        grid-row-end: span 9
    }

    .twelve-columns > .span-h-10 {
        grid-row-end: span 10
    }

    .twelve-columns > .span-h-11 {
        grid-row-end: span 11
    }

    .twelve-columns > .span-h-12 {
        grid-row-end: span 12
    }

@media (min-width: 320px) {
    .one-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

        .one-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .one-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .one-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .one-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .one-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .one-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .one-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .one-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .one-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .one-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .one-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .one-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .one-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .one-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .one-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .one-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .one-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .one-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .one-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .one-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .one-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .one-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .one-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .one-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .two-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .two-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .two-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .two-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .two-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .two-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .two-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .two-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .two-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .two-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .two-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .two-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .two-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .two-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .two-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .two-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .two-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .two-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .two-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .two-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .two-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .two-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .two-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .two-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .two-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .three-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

        .three-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .three-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .three-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .three-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .three-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .three-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .three-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .three-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .three-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .three-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .three-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .three-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .three-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .three-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .three-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .three-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .three-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .three-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .three-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .three-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .three-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .three-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .three-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .three-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .four-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

        .four-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .four-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .four-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .four-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .four-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .four-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .four-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .four-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .four-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .four-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .four-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .four-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .four-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .four-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .four-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .four-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .four-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .four-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .four-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .four-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .four-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .four-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .four-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .four-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .five-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(5,minmax(0,1fr))
    }

        .five-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .five-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .five-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .five-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .five-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .five-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .five-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .five-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .five-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .five-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .five-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .five-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .five-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .five-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .five-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .five-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .five-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .five-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .five-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .five-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .five-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .five-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .five-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .five-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .six-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(6,minmax(0,1fr))
    }

        .six-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .six-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .six-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .six-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .six-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .six-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .six-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .six-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .six-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .six-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .six-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .six-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .six-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .six-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .six-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .six-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .six-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .six-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .six-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .six-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .six-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .six-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .six-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .six-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .seven-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(7,minmax(0,1fr))
    }

        .seven-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .seven-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .seven-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .seven-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .seven-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .seven-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .seven-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .seven-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .seven-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .seven-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .seven-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .seven-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .seven-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .seven-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .seven-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .seven-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .seven-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .seven-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .seven-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .seven-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .seven-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .seven-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .seven-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .seven-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .eight-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(8,minmax(0,1fr))
    }

        .eight-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .eight-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .eight-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .eight-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .eight-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .eight-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .eight-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .eight-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .eight-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .eight-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .eight-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .eight-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .eight-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .eight-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .eight-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .eight-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .eight-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .eight-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .eight-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .eight-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .eight-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .eight-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .eight-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .eight-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .nine-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(9,minmax(0,1fr))
    }

        .nine-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .nine-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .nine-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .nine-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .nine-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .nine-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .nine-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .nine-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .nine-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .nine-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .nine-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .nine-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .nine-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .nine-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .nine-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .nine-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .nine-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .nine-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .nine-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .nine-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .nine-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .nine-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .nine-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .nine-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .ten-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(10,minmax(0,1fr))
    }

        .ten-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .ten-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .ten-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .ten-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .ten-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .ten-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .ten-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .ten-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .ten-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .ten-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .ten-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .ten-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .ten-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .ten-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .ten-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .ten-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .ten-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .ten-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .ten-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .ten-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .ten-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .ten-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .ten-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .ten-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .eleven-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(11,minmax(0,1fr))
    }

        .eleven-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .eleven-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .eleven-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .eleven-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .eleven-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .eleven-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .eleven-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .eleven-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .eleven-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .eleven-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .eleven-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .eleven-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .eleven-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .eleven-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .eleven-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .eleven-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .eleven-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .eleven-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .eleven-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .eleven-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .eleven-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .eleven-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .eleven-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .eleven-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }

    .twelve-columns-xs {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(12,minmax(0,1fr))
    }

        .twelve-columns-xs > .span-w-1 {
            grid-column-end: span 1
        }

        .twelve-columns-xs > .span-w-2 {
            grid-column-end: span 2
        }

        .twelve-columns-xs > .span-w-3 {
            grid-column-end: span 3
        }

        .twelve-columns-xs > .span-w-4 {
            grid-column-end: span 4
        }

        .twelve-columns-xs > .span-w-5 {
            grid-column-end: span 5
        }

        .twelve-columns-xs > .span-w-6 {
            grid-column-end: span 6
        }

        .twelve-columns-xs > .span-w-7 {
            grid-column-end: span 7
        }

        .twelve-columns-xs > .span-w-8 {
            grid-column-end: span 8
        }

        .twelve-columns-xs > .span-w-9 {
            grid-column-end: span 9
        }

        .twelve-columns-xs > .span-w-10 {
            grid-column-end: span 10
        }

        .twelve-columns-xs > .span-w-11 {
            grid-column-end: span 11
        }

        .twelve-columns-xs > .span-w-12 {
            grid-column-end: span 12
        }

        .twelve-columns-xs > .span-h-1 {
            grid-row-end: span 1
        }

        .twelve-columns-xs > .span-h-2 {
            grid-row-end: span 2
        }

        .twelve-columns-xs > .span-h-3 {
            grid-row-end: span 3
        }

        .twelve-columns-xs > .span-h-4 {
            grid-row-end: span 4
        }

        .twelve-columns-xs > .span-h-5 {
            grid-row-end: span 5
        }

        .twelve-columns-xs > .span-h-6 {
            grid-row-end: span 6
        }

        .twelve-columns-xs > .span-h-7 {
            grid-row-end: span 7
        }

        .twelve-columns-xs > .span-h-8 {
            grid-row-end: span 8
        }

        .twelve-columns-xs > .span-h-9 {
            grid-row-end: span 9
        }

        .twelve-columns-xs > .span-h-10 {
            grid-row-end: span 10
        }

        .twelve-columns-xs > .span-h-11 {
            grid-row-end: span 11
        }

        .twelve-columns-xs > .span-h-12 {
            grid-row-end: span 12
        }
}

@media (min-width: 576px) {
    .one-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

        .one-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .one-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .one-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .one-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .one-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .one-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .one-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .one-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .one-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .one-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .one-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .one-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .one-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .one-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .one-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .one-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .one-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .one-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .one-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .one-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .one-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .one-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .one-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .one-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .two-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .two-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .two-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .two-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .two-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .two-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .two-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .two-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .two-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .two-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .two-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .two-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .two-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .two-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .two-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .two-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .two-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .two-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .two-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .two-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .two-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .two-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .two-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .two-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .two-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .three-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

        .three-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .three-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .three-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .three-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .three-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .three-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .three-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .three-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .three-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .three-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .three-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .three-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .three-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .three-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .three-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .three-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .three-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .three-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .three-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .three-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .three-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .three-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .three-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .three-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .four-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

        .four-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .four-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .four-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .four-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .four-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .four-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .four-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .four-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .four-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .four-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .four-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .four-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .four-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .four-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .four-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .four-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .four-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .four-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .four-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .four-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .four-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .four-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .four-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .four-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .five-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(5,minmax(0,1fr))
    }

        .five-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .five-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .five-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .five-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .five-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .five-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .five-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .five-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .five-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .five-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .five-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .five-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .five-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .five-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .five-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .five-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .five-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .five-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .five-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .five-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .five-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .five-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .five-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .five-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .six-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(6,minmax(0,1fr))
    }

        .six-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .six-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .six-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .six-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .six-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .six-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .six-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .six-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .six-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .six-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .six-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .six-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .six-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .six-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .six-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .six-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .six-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .six-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .six-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .six-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .six-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .six-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .six-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .six-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .seven-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(7,minmax(0,1fr))
    }

        .seven-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .seven-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .seven-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .seven-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .seven-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .seven-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .seven-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .seven-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .seven-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .seven-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .seven-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .seven-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .seven-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .seven-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .seven-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .seven-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .seven-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .seven-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .seven-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .seven-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .seven-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .seven-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .seven-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .seven-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .eight-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(8,minmax(0,1fr))
    }

        .eight-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .eight-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .eight-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .eight-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .eight-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .eight-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .eight-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .eight-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .eight-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .eight-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .eight-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .eight-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .eight-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .eight-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .eight-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .eight-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .eight-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .eight-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .eight-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .eight-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .eight-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .eight-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .eight-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .eight-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .nine-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(9,minmax(0,1fr))
    }

        .nine-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .nine-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .nine-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .nine-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .nine-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .nine-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .nine-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .nine-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .nine-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .nine-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .nine-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .nine-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .nine-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .nine-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .nine-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .nine-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .nine-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .nine-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .nine-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .nine-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .nine-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .nine-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .nine-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .nine-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .ten-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(10,minmax(0,1fr))
    }

        .ten-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .ten-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .ten-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .ten-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .ten-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .ten-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .ten-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .ten-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .ten-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .ten-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .ten-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .ten-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .ten-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .ten-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .ten-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .ten-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .ten-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .ten-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .ten-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .ten-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .ten-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .ten-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .ten-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .ten-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .eleven-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(11,minmax(0,1fr))
    }

        .eleven-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .eleven-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .eleven-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .eleven-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .eleven-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .eleven-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .eleven-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .eleven-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .eleven-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .eleven-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .eleven-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .eleven-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .eleven-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .eleven-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .eleven-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .eleven-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .eleven-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .eleven-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .eleven-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .eleven-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .eleven-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .eleven-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .eleven-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .eleven-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }

    .twelve-columns-sm {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(12,minmax(0,1fr))
    }

        .twelve-columns-sm > .span-w-1 {
            grid-column-end: span 1
        }

        .twelve-columns-sm > .span-w-2 {
            grid-column-end: span 2
        }

        .twelve-columns-sm > .span-w-3 {
            grid-column-end: span 3
        }

        .twelve-columns-sm > .span-w-4 {
            grid-column-end: span 4
        }

        .twelve-columns-sm > .span-w-5 {
            grid-column-end: span 5
        }

        .twelve-columns-sm > .span-w-6 {
            grid-column-end: span 6
        }

        .twelve-columns-sm > .span-w-7 {
            grid-column-end: span 7
        }

        .twelve-columns-sm > .span-w-8 {
            grid-column-end: span 8
        }

        .twelve-columns-sm > .span-w-9 {
            grid-column-end: span 9
        }

        .twelve-columns-sm > .span-w-10 {
            grid-column-end: span 10
        }

        .twelve-columns-sm > .span-w-11 {
            grid-column-end: span 11
        }

        .twelve-columns-sm > .span-w-12 {
            grid-column-end: span 12
        }

        .twelve-columns-sm > .span-h-1 {
            grid-row-end: span 1
        }

        .twelve-columns-sm > .span-h-2 {
            grid-row-end: span 2
        }

        .twelve-columns-sm > .span-h-3 {
            grid-row-end: span 3
        }

        .twelve-columns-sm > .span-h-4 {
            grid-row-end: span 4
        }

        .twelve-columns-sm > .span-h-5 {
            grid-row-end: span 5
        }

        .twelve-columns-sm > .span-h-6 {
            grid-row-end: span 6
        }

        .twelve-columns-sm > .span-h-7 {
            grid-row-end: span 7
        }

        .twelve-columns-sm > .span-h-8 {
            grid-row-end: span 8
        }

        .twelve-columns-sm > .span-h-9 {
            grid-row-end: span 9
        }

        .twelve-columns-sm > .span-h-10 {
            grid-row-end: span 10
        }

        .twelve-columns-sm > .span-h-11 {
            grid-row-end: span 11
        }

        .twelve-columns-sm > .span-h-12 {
            grid-row-end: span 12
        }
}

@media (min-width: 768px) {
    .one-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

        .one-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .one-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .one-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .one-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .one-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .one-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .one-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .one-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .one-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .one-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .one-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .one-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .one-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .one-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .one-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .one-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .one-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .one-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .one-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .one-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .one-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .one-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .one-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .one-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .two-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .two-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .two-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .two-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .two-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .two-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .two-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .two-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .two-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .two-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .two-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .two-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .two-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .two-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .two-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .two-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .two-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .two-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .two-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .two-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .two-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .two-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .two-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .two-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .two-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .three-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

        .three-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .three-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .three-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .three-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .three-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .three-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .three-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .three-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .three-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .three-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .three-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .three-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .three-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .three-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .three-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .three-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .three-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .three-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .three-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .three-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .three-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .three-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .three-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .three-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .four-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

        .four-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .four-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .four-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .four-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .four-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .four-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .four-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .four-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .four-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .four-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .four-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .four-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .four-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .four-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .four-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .four-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .four-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .four-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .four-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .four-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .four-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .four-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .four-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .four-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .five-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(5,minmax(0,1fr))
    }

        .five-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .five-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .five-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .five-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .five-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .five-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .five-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .five-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .five-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .five-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .five-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .five-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .five-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .five-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .five-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .five-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .five-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .five-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .five-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .five-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .five-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .five-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .five-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .five-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .six-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(6,minmax(0,1fr))
    }

        .six-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .six-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .six-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .six-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .six-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .six-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .six-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .six-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .six-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .six-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .six-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .six-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .six-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .six-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .six-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .six-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .six-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .six-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .six-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .six-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .six-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .six-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .six-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .six-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .seven-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(7,minmax(0,1fr))
    }

        .seven-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .seven-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .seven-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .seven-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .seven-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .seven-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .seven-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .seven-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .seven-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .seven-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .seven-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .seven-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .seven-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .seven-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .seven-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .seven-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .seven-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .seven-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .seven-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .seven-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .seven-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .seven-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .seven-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .seven-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .eight-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(8,minmax(0,1fr))
    }

        .eight-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .eight-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .eight-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .eight-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .eight-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .eight-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .eight-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .eight-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .eight-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .eight-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .eight-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .eight-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .eight-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .eight-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .eight-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .eight-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .eight-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .eight-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .eight-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .eight-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .eight-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .eight-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .eight-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .eight-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .nine-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(9,minmax(0,1fr))
    }

        .nine-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .nine-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .nine-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .nine-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .nine-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .nine-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .nine-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .nine-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .nine-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .nine-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .nine-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .nine-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .nine-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .nine-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .nine-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .nine-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .nine-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .nine-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .nine-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .nine-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .nine-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .nine-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .nine-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .nine-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .ten-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(10,minmax(0,1fr))
    }

        .ten-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .ten-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .ten-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .ten-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .ten-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .ten-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .ten-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .ten-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .ten-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .ten-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .ten-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .ten-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .ten-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .ten-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .ten-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .ten-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .ten-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .ten-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .ten-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .ten-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .ten-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .ten-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .ten-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .ten-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .eleven-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(11,minmax(0,1fr))
    }

        .eleven-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .eleven-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .eleven-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .eleven-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .eleven-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .eleven-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .eleven-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .eleven-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .eleven-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .eleven-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .eleven-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .eleven-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .eleven-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .eleven-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .eleven-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .eleven-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .eleven-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .eleven-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .eleven-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .eleven-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .eleven-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .eleven-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .eleven-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .eleven-columns-md > .span-h-12 {
            grid-row-end: span 12
        }

    .twelve-columns-md {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(12,minmax(0,1fr))
    }

        .twelve-columns-md > .span-w-1 {
            grid-column-end: span 1
        }

        .twelve-columns-md > .span-w-2 {
            grid-column-end: span 2
        }

        .twelve-columns-md > .span-w-3 {
            grid-column-end: span 3
        }

        .twelve-columns-md > .span-w-4 {
            grid-column-end: span 4
        }

        .twelve-columns-md > .span-w-5 {
            grid-column-end: span 5
        }

        .twelve-columns-md > .span-w-6 {
            grid-column-end: span 6
        }

        .twelve-columns-md > .span-w-7 {
            grid-column-end: span 7
        }

        .twelve-columns-md > .span-w-8 {
            grid-column-end: span 8
        }

        .twelve-columns-md > .span-w-9 {
            grid-column-end: span 9
        }

        .twelve-columns-md > .span-w-10 {
            grid-column-end: span 10
        }

        .twelve-columns-md > .span-w-11 {
            grid-column-end: span 11
        }

        .twelve-columns-md > .span-w-12 {
            grid-column-end: span 12
        }

        .twelve-columns-md > .span-h-1 {
            grid-row-end: span 1
        }

        .twelve-columns-md > .span-h-2 {
            grid-row-end: span 2
        }

        .twelve-columns-md > .span-h-3 {
            grid-row-end: span 3
        }

        .twelve-columns-md > .span-h-4 {
            grid-row-end: span 4
        }

        .twelve-columns-md > .span-h-5 {
            grid-row-end: span 5
        }

        .twelve-columns-md > .span-h-6 {
            grid-row-end: span 6
        }

        .twelve-columns-md > .span-h-7 {
            grid-row-end: span 7
        }

        .twelve-columns-md > .span-h-8 {
            grid-row-end: span 8
        }

        .twelve-columns-md > .span-h-9 {
            grid-row-end: span 9
        }

        .twelve-columns-md > .span-h-10 {
            grid-row-end: span 10
        }

        .twelve-columns-md > .span-h-11 {
            grid-row-end: span 11
        }

        .twelve-columns-md > .span-h-12 {
            grid-row-end: span 12
        }
}

@media (min-width: 992px) {
    .one-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

        .one-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .one-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .one-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .one-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .one-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .one-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .one-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .one-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .one-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .one-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .one-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .one-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .one-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .one-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .one-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .one-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .one-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .one-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .one-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .one-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .one-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .one-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .one-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .one-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .two-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .two-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .two-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .two-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .two-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .two-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .two-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .two-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .two-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .two-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .two-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .two-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .two-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .two-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .two-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .two-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .two-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .two-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .two-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .two-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .two-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .two-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .two-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .two-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .two-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .three-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

        .three-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .three-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .three-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .three-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .three-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .three-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .three-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .three-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .three-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .three-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .three-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .three-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .three-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .three-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .three-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .three-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .three-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .three-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .three-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .three-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .three-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .three-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .three-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .three-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .four-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

        .four-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .four-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .four-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .four-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .four-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .four-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .four-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .four-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .four-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .four-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .four-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .four-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .four-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .four-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .four-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .four-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .four-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .four-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .four-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .four-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .four-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .four-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .four-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .four-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .five-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(5,minmax(0,1fr))
    }

        .five-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .five-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .five-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .five-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .five-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .five-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .five-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .five-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .five-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .five-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .five-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .five-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .five-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .five-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .five-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .five-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .five-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .five-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .five-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .five-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .five-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .five-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .five-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .five-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .six-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(6,minmax(0,1fr))
    }

        .six-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .six-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .six-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .six-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .six-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .six-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .six-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .six-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .six-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .six-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .six-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .six-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .six-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .six-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .six-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .six-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .six-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .six-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .six-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .six-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .six-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .six-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .six-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .six-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .seven-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(7,minmax(0,1fr))
    }

        .seven-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .seven-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .seven-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .seven-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .seven-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .seven-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .seven-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .seven-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .seven-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .seven-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .seven-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .seven-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .seven-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .seven-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .seven-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .seven-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .seven-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .seven-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .seven-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .seven-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .seven-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .seven-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .seven-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .seven-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .eight-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(8,minmax(0,1fr))
    }

        .eight-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .eight-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .eight-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .eight-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .eight-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .eight-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .eight-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .eight-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .eight-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .eight-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .eight-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .eight-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .eight-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .eight-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .eight-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .eight-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .eight-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .eight-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .eight-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .eight-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .eight-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .eight-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .eight-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .eight-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .nine-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(9,minmax(0,1fr))
    }

        .nine-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .nine-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .nine-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .nine-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .nine-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .nine-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .nine-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .nine-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .nine-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .nine-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .nine-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .nine-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .nine-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .nine-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .nine-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .nine-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .nine-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .nine-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .nine-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .nine-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .nine-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .nine-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .nine-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .nine-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .ten-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(10,minmax(0,1fr))
    }

        .ten-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .ten-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .ten-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .ten-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .ten-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .ten-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .ten-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .ten-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .ten-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .ten-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .ten-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .ten-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .ten-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .ten-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .ten-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .ten-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .ten-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .ten-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .ten-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .ten-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .ten-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .ten-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .ten-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .ten-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .eleven-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(11,minmax(0,1fr))
    }

        .eleven-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .eleven-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .eleven-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .eleven-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .eleven-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .eleven-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .eleven-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .eleven-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .eleven-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .eleven-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .eleven-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .eleven-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .eleven-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .eleven-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .eleven-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .eleven-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .eleven-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .eleven-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .eleven-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .eleven-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .eleven-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .eleven-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .eleven-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .eleven-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }

    .twelve-columns-lg {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(12,minmax(0,1fr))
    }

        .twelve-columns-lg > .span-w-1 {
            grid-column-end: span 1
        }

        .twelve-columns-lg > .span-w-2 {
            grid-column-end: span 2
        }

        .twelve-columns-lg > .span-w-3 {
            grid-column-end: span 3
        }

        .twelve-columns-lg > .span-w-4 {
            grid-column-end: span 4
        }

        .twelve-columns-lg > .span-w-5 {
            grid-column-end: span 5
        }

        .twelve-columns-lg > .span-w-6 {
            grid-column-end: span 6
        }

        .twelve-columns-lg > .span-w-7 {
            grid-column-end: span 7
        }

        .twelve-columns-lg > .span-w-8 {
            grid-column-end: span 8
        }

        .twelve-columns-lg > .span-w-9 {
            grid-column-end: span 9
        }

        .twelve-columns-lg > .span-w-10 {
            grid-column-end: span 10
        }

        .twelve-columns-lg > .span-w-11 {
            grid-column-end: span 11
        }

        .twelve-columns-lg > .span-w-12 {
            grid-column-end: span 12
        }

        .twelve-columns-lg > .span-h-1 {
            grid-row-end: span 1
        }

        .twelve-columns-lg > .span-h-2 {
            grid-row-end: span 2
        }

        .twelve-columns-lg > .span-h-3 {
            grid-row-end: span 3
        }

        .twelve-columns-lg > .span-h-4 {
            grid-row-end: span 4
        }

        .twelve-columns-lg > .span-h-5 {
            grid-row-end: span 5
        }

        .twelve-columns-lg > .span-h-6 {
            grid-row-end: span 6
        }

        .twelve-columns-lg > .span-h-7 {
            grid-row-end: span 7
        }

        .twelve-columns-lg > .span-h-8 {
            grid-row-end: span 8
        }

        .twelve-columns-lg > .span-h-9 {
            grid-row-end: span 9
        }

        .twelve-columns-lg > .span-h-10 {
            grid-row-end: span 10
        }

        .twelve-columns-lg > .span-h-11 {
            grid-row-end: span 11
        }

        .twelve-columns-lg > .span-h-12 {
            grid-row-end: span 12
        }
}

@media (min-width: 1200px) {
    .one-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

        .one-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .one-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .one-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .one-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .one-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .one-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .one-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .one-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .one-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .one-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .one-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .one-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .one-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .one-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .one-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .one-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .one-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .one-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .one-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .one-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .one-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .one-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .one-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .one-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .two-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .two-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .two-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .two-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .two-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .two-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .two-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .two-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .two-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .two-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .two-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .two-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .two-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .two-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .two-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .two-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .two-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .two-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .two-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .two-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .two-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .two-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .two-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .two-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .two-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .three-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

        .three-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .three-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .three-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .three-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .three-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .three-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .three-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .three-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .three-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .three-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .three-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .three-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .three-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .three-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .three-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .three-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .three-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .three-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .three-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .three-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .three-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .three-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .three-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .three-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .four-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

        .four-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .four-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .four-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .four-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .four-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .four-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .four-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .four-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .four-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .four-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .four-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .four-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .four-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .four-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .four-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .four-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .four-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .four-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .four-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .four-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .four-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .four-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .four-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .four-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .five-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(5,minmax(0,1fr))
    }

        .five-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .five-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .five-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .five-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .five-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .five-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .five-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .five-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .five-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .five-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .five-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .five-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .five-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .five-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .five-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .five-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .five-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .five-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .five-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .five-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .five-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .five-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .five-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .five-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .six-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(6,minmax(0,1fr))
    }

        .six-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .six-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .six-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .six-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .six-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .six-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .six-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .six-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .six-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .six-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .six-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .six-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .six-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .six-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .six-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .six-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .six-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .six-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .six-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .six-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .six-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .six-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .six-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .six-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .seven-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(7,minmax(0,1fr))
    }

        .seven-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .seven-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .seven-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .seven-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .seven-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .seven-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .seven-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .seven-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .seven-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .seven-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .seven-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .seven-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .seven-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .seven-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .seven-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .seven-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .seven-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .seven-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .seven-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .seven-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .seven-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .seven-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .seven-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .seven-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .eight-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(8,minmax(0,1fr))
    }

        .eight-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .eight-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .eight-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .eight-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .eight-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .eight-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .eight-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .eight-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .eight-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .eight-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .eight-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .eight-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .eight-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .eight-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .eight-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .eight-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .eight-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .eight-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .eight-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .eight-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .eight-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .eight-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .eight-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .eight-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .nine-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(9,minmax(0,1fr))
    }

        .nine-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .nine-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .nine-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .nine-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .nine-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .nine-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .nine-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .nine-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .nine-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .nine-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .nine-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .nine-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .nine-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .nine-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .nine-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .nine-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .nine-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .nine-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .nine-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .nine-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .nine-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .nine-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .nine-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .nine-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .ten-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(10,minmax(0,1fr))
    }

        .ten-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .ten-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .ten-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .ten-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .ten-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .ten-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .ten-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .ten-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .ten-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .ten-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .ten-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .ten-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .ten-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .ten-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .ten-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .ten-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .ten-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .ten-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .ten-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .ten-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .ten-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .ten-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .ten-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .ten-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .eleven-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(11,minmax(0,1fr))
    }

        .eleven-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .eleven-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .eleven-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .eleven-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .eleven-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .eleven-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .eleven-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .eleven-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .eleven-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .eleven-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .eleven-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .eleven-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .eleven-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .eleven-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .eleven-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .eleven-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .eleven-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .eleven-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .eleven-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .eleven-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .eleven-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .eleven-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .eleven-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .eleven-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }

    .twelve-columns-xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(12,minmax(0,1fr))
    }

        .twelve-columns-xl > .span-w-1 {
            grid-column-end: span 1
        }

        .twelve-columns-xl > .span-w-2 {
            grid-column-end: span 2
        }

        .twelve-columns-xl > .span-w-3 {
            grid-column-end: span 3
        }

        .twelve-columns-xl > .span-w-4 {
            grid-column-end: span 4
        }

        .twelve-columns-xl > .span-w-5 {
            grid-column-end: span 5
        }

        .twelve-columns-xl > .span-w-6 {
            grid-column-end: span 6
        }

        .twelve-columns-xl > .span-w-7 {
            grid-column-end: span 7
        }

        .twelve-columns-xl > .span-w-8 {
            grid-column-end: span 8
        }

        .twelve-columns-xl > .span-w-9 {
            grid-column-end: span 9
        }

        .twelve-columns-xl > .span-w-10 {
            grid-column-end: span 10
        }

        .twelve-columns-xl > .span-w-11 {
            grid-column-end: span 11
        }

        .twelve-columns-xl > .span-w-12 {
            grid-column-end: span 12
        }

        .twelve-columns-xl > .span-h-1 {
            grid-row-end: span 1
        }

        .twelve-columns-xl > .span-h-2 {
            grid-row-end: span 2
        }

        .twelve-columns-xl > .span-h-3 {
            grid-row-end: span 3
        }

        .twelve-columns-xl > .span-h-4 {
            grid-row-end: span 4
        }

        .twelve-columns-xl > .span-h-5 {
            grid-row-end: span 5
        }

        .twelve-columns-xl > .span-h-6 {
            grid-row-end: span 6
        }

        .twelve-columns-xl > .span-h-7 {
            grid-row-end: span 7
        }

        .twelve-columns-xl > .span-h-8 {
            grid-row-end: span 8
        }

        .twelve-columns-xl > .span-h-9 {
            grid-row-end: span 9
        }

        .twelve-columns-xl > .span-h-10 {
            grid-row-end: span 10
        }

        .twelve-columns-xl > .span-h-11 {
            grid-row-end: span 11
        }

        .twelve-columns-xl > .span-h-12 {
            grid-row-end: span 12
        }
}

@media (min-width: 1400px) {
    .one-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

        .one-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .one-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .one-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .one-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .one-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .one-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .one-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .one-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .one-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .one-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .one-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .one-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .one-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .one-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .one-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .one-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .one-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .one-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .one-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .one-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .one-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .one-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .one-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .one-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .two-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .two-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .two-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .two-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .two-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .two-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .two-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .two-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .two-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .two-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .two-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .two-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .two-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .two-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .two-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .two-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .two-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .two-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .two-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .two-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .two-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .two-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .two-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .two-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .two-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .three-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

        .three-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .three-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .three-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .three-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .three-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .three-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .three-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .three-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .three-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .three-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .three-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .three-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .three-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .three-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .three-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .three-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .three-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .three-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .three-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .three-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .three-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .three-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .three-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .three-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .four-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

        .four-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .four-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .four-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .four-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .four-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .four-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .four-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .four-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .four-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .four-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .four-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .four-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .four-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .four-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .four-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .four-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .four-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .four-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .four-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .four-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .four-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .four-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .four-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .four-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .five-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(5,minmax(0,1fr))
    }

        .five-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .five-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .five-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .five-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .five-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .five-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .five-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .five-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .five-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .five-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .five-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .five-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .five-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .five-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .five-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .five-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .five-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .five-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .five-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .five-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .five-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .five-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .five-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .five-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .six-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(6,minmax(0,1fr))
    }

        .six-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .six-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .six-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .six-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .six-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .six-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .six-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .six-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .six-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .six-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .six-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .six-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .six-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .six-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .six-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .six-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .six-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .six-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .six-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .six-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .six-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .six-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .six-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .six-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .seven-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(7,minmax(0,1fr))
    }

        .seven-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .seven-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .seven-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .seven-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .seven-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .seven-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .seven-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .seven-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .seven-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .seven-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .seven-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .seven-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .seven-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .seven-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .seven-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .seven-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .seven-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .seven-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .seven-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .seven-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .seven-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .seven-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .seven-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .seven-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .eight-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(8,minmax(0,1fr))
    }

        .eight-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .eight-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .eight-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .eight-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .eight-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .eight-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .eight-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .eight-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .eight-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .eight-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .eight-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .eight-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .eight-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .eight-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .eight-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .eight-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .eight-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .eight-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .eight-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .eight-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .eight-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .eight-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .eight-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .eight-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .nine-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(9,minmax(0,1fr))
    }

        .nine-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .nine-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .nine-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .nine-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .nine-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .nine-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .nine-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .nine-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .nine-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .nine-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .nine-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .nine-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .nine-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .nine-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .nine-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .nine-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .nine-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .nine-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .nine-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .nine-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .nine-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .nine-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .nine-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .nine-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .ten-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(10,minmax(0,1fr))
    }

        .ten-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .ten-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .ten-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .ten-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .ten-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .ten-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .ten-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .ten-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .ten-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .ten-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .ten-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .ten-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .ten-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .ten-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .ten-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .ten-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .ten-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .ten-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .ten-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .ten-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .ten-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .ten-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .ten-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .ten-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .eleven-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(11,minmax(0,1fr))
    }

        .eleven-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .eleven-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .eleven-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .eleven-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .eleven-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .eleven-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .eleven-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .eleven-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .eleven-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .eleven-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .eleven-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .eleven-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .eleven-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .eleven-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .eleven-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .eleven-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .eleven-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .eleven-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .eleven-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .eleven-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .eleven-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .eleven-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .eleven-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .eleven-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }

    .twelve-columns-xxl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(12,minmax(0,1fr))
    }

        .twelve-columns-xxl > .span-w-1 {
            grid-column-end: span 1
        }

        .twelve-columns-xxl > .span-w-2 {
            grid-column-end: span 2
        }

        .twelve-columns-xxl > .span-w-3 {
            grid-column-end: span 3
        }

        .twelve-columns-xxl > .span-w-4 {
            grid-column-end: span 4
        }

        .twelve-columns-xxl > .span-w-5 {
            grid-column-end: span 5
        }

        .twelve-columns-xxl > .span-w-6 {
            grid-column-end: span 6
        }

        .twelve-columns-xxl > .span-w-7 {
            grid-column-end: span 7
        }

        .twelve-columns-xxl > .span-w-8 {
            grid-column-end: span 8
        }

        .twelve-columns-xxl > .span-w-9 {
            grid-column-end: span 9
        }

        .twelve-columns-xxl > .span-w-10 {
            grid-column-end: span 10
        }

        .twelve-columns-xxl > .span-w-11 {
            grid-column-end: span 11
        }

        .twelve-columns-xxl > .span-w-12 {
            grid-column-end: span 12
        }

        .twelve-columns-xxl > .span-h-1 {
            grid-row-end: span 1
        }

        .twelve-columns-xxl > .span-h-2 {
            grid-row-end: span 2
        }

        .twelve-columns-xxl > .span-h-3 {
            grid-row-end: span 3
        }

        .twelve-columns-xxl > .span-h-4 {
            grid-row-end: span 4
        }

        .twelve-columns-xxl > .span-h-5 {
            grid-row-end: span 5
        }

        .twelve-columns-xxl > .span-h-6 {
            grid-row-end: span 6
        }

        .twelve-columns-xxl > .span-h-7 {
            grid-row-end: span 7
        }

        .twelve-columns-xxl > .span-h-8 {
            grid-row-end: span 8
        }

        .twelve-columns-xxl > .span-h-9 {
            grid-row-end: span 9
        }

        .twelve-columns-xxl > .span-h-10 {
            grid-row-end: span 10
        }

        .twelve-columns-xxl > .span-h-11 {
            grid-row-end: span 11
        }

        .twelve-columns-xxl > .span-h-12 {
            grid-row-end: span 12
        }
}

@media (min-width: 1600px) {
    .one-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

        .one-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .one-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .one-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .one-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .one-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .one-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .one-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .one-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .one-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .one-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .one-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .one-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .one-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .one-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .one-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .one-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .one-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .one-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .one-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .one-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .one-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .one-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .one-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .one-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .two-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .two-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .two-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .two-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .two-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .two-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .two-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .two-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .two-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .two-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .two-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .two-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .two-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .two-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .two-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .two-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .two-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .two-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .two-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .two-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .two-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .two-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .two-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .two-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .two-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .three-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

        .three-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .three-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .three-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .three-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .three-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .three-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .three-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .three-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .three-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .three-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .three-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .three-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .three-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .three-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .three-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .three-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .three-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .three-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .three-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .three-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .three-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .three-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .three-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .three-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .four-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

        .four-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .four-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .four-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .four-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .four-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .four-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .four-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .four-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .four-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .four-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .four-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .four-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .four-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .four-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .four-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .four-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .four-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .four-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .four-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .four-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .four-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .four-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .four-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .four-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .five-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(5,minmax(0,1fr))
    }

        .five-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .five-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .five-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .five-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .five-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .five-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .five-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .five-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .five-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .five-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .five-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .five-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .five-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .five-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .five-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .five-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .five-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .five-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .five-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .five-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .five-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .five-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .five-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .five-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .six-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(6,minmax(0,1fr))
    }

        .six-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .six-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .six-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .six-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .six-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .six-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .six-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .six-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .six-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .six-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .six-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .six-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .six-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .six-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .six-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .six-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .six-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .six-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .six-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .six-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .six-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .six-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .six-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .six-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .seven-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(7,minmax(0,1fr))
    }

        .seven-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .seven-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .seven-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .seven-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .seven-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .seven-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .seven-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .seven-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .seven-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .seven-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .seven-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .seven-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .seven-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .seven-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .seven-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .seven-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .seven-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .seven-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .seven-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .seven-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .seven-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .seven-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .seven-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .seven-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .eight-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(8,minmax(0,1fr))
    }

        .eight-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .eight-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .eight-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .eight-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .eight-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .eight-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .eight-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .eight-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .eight-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .eight-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .eight-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .eight-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .eight-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .eight-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .eight-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .eight-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .eight-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .eight-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .eight-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .eight-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .eight-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .eight-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .eight-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .eight-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .nine-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(9,minmax(0,1fr))
    }

        .nine-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .nine-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .nine-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .nine-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .nine-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .nine-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .nine-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .nine-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .nine-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .nine-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .nine-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .nine-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .nine-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .nine-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .nine-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .nine-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .nine-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .nine-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .nine-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .nine-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .nine-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .nine-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .nine-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .nine-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .ten-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(10,minmax(0,1fr))
    }

        .ten-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .ten-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .ten-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .ten-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .ten-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .ten-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .ten-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .ten-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .ten-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .ten-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .ten-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .ten-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .ten-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .ten-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .ten-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .ten-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .ten-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .ten-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .ten-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .ten-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .ten-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .ten-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .ten-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .ten-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .eleven-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(11,minmax(0,1fr))
    }

        .eleven-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .eleven-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .eleven-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .eleven-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .eleven-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .eleven-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .eleven-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .eleven-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .eleven-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .eleven-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .eleven-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .eleven-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .eleven-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .eleven-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .eleven-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .eleven-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .eleven-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .eleven-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .eleven-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .eleven-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .eleven-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .eleven-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .eleven-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .eleven-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }

    .twelve-columns-3xl {
        display: grid;
        justify-items: stretch;
        grid-template-columns: repeat(12,minmax(0,1fr))
    }

        .twelve-columns-3xl > .span-w-1 {
            grid-column-end: span 1
        }

        .twelve-columns-3xl > .span-w-2 {
            grid-column-end: span 2
        }

        .twelve-columns-3xl > .span-w-3 {
            grid-column-end: span 3
        }

        .twelve-columns-3xl > .span-w-4 {
            grid-column-end: span 4
        }

        .twelve-columns-3xl > .span-w-5 {
            grid-column-end: span 5
        }

        .twelve-columns-3xl > .span-w-6 {
            grid-column-end: span 6
        }

        .twelve-columns-3xl > .span-w-7 {
            grid-column-end: span 7
        }

        .twelve-columns-3xl > .span-w-8 {
            grid-column-end: span 8
        }

        .twelve-columns-3xl > .span-w-9 {
            grid-column-end: span 9
        }

        .twelve-columns-3xl > .span-w-10 {
            grid-column-end: span 10
        }

        .twelve-columns-3xl > .span-w-11 {
            grid-column-end: span 11
        }

        .twelve-columns-3xl > .span-w-12 {
            grid-column-end: span 12
        }

        .twelve-columns-3xl > .span-h-1 {
            grid-row-end: span 1
        }

        .twelve-columns-3xl > .span-h-2 {
            grid-row-end: span 2
        }

        .twelve-columns-3xl > .span-h-3 {
            grid-row-end: span 3
        }

        .twelve-columns-3xl > .span-h-4 {
            grid-row-end: span 4
        }

        .twelve-columns-3xl > .span-h-5 {
            grid-row-end: span 5
        }

        .twelve-columns-3xl > .span-h-6 {
            grid-row-end: span 6
        }

        .twelve-columns-3xl > .span-h-7 {
            grid-row-end: span 7
        }

        .twelve-columns-3xl > .span-h-8 {
            grid-row-end: span 8
        }

        .twelve-columns-3xl > .span-h-9 {
            grid-row-end: span 9
        }

        .twelve-columns-3xl > .span-h-10 {
            grid-row-end: span 10
        }

        .twelve-columns-3xl > .span-h-11 {
            grid-row-end: span 11
        }

        .twelve-columns-3xl > .span-h-12 {
            grid-row-end: span 12
        }
}
/* #endregion */