/* 
Extra small devices (phones, less than 768px)
No media query since this is the default in Bootstrap
Small devices (tablets, 768px and up)
Medium devices (desktops, 992px and up)
Large devices (large desktops, 1200px and up) 
*/

.layout{
    display: grid;
    position: relative;
    width: 100%;
}

.layout .grid{
    display: grid;
    position: relative;
    width: 100%;
}

@media screen and (min-width: 992px){
    .layout .grid{
        grid-template-columns: repeat(12, 1fr);
    }
}

.layout .grid .column{
    display: grid;
    position: relative;
}

.layout .grid .column .blocks{
    display: grid;
    position: relative;
}

@media screen and (min-width: 992px){

    .has-12-spans{
        grid-column: span 12;
    }

    .has-11-spans{
        grid-column: span 11;
    }

    .has-10-spans{
        grid-column: span 10;
    }

    .has-9-spans{
        grid-column: span 9;
    }

    .has-8-spans{
        grid-column: span 8;
    }

    .has-7-spans{
        grid-column: span 7;
    }

    .has-6-spans{
        grid-column: span 6;
    }

    .has-5-spans{
        grid-column: span 5;
    }

    .has-4-spans{
        grid-column: span 4;
    }

    .has-3-spans{
        grid-column: span 3;
    }

    .has-2-spans{
        grid-column: span 2;
    }

    .has-1-spans{
        grid-column: span 1;
    }
}

/* Organizer / Isotope grid */
.organizer{
    position: relative;
    width: 100%;
}

.organizer .organizer-item{
    position: relative;
    width: 100%;
}

.organizer .organizer-item .item-inner-wrapper{
    position: relative;
    width: 100%;
}

/* Mobile: always full width */
@media screen and (max-width: 991px) {
    .is-isotope-grid .organizer-item{
        width: 100%;
    }
}

/* ISOTOPE & GAPS LOGIC */

:root {
  --scale: 1; /* Default scale */
}

@media screen and (min-width: 992px) {
    /* Scale the base percentage (e.g., 50% * scale) then subtract the gutter share */
    .is-isotope-grid .has-12-spans { width: calc(100% * var(--scale)); }
    .is-isotope-grid .has-11-spans { width: calc((91.666% * var(--scale)) - (var(--gutter-x) * 1 / 12)); }
    .is-isotope-grid .has-10-spans { width: calc((83.333% * var(--scale)) - (var(--gutter-x) * 2 / 12)); }
    .is-isotope-grid .has-9-spans  { width: calc((75%     * var(--scale)) - (var(--gutter-x) * 3 / 12)); }
    .is-isotope-grid .has-8-spans  { width: calc((66.666% * var(--scale)) - (var(--gutter-x) * 4 / 12)); }
    .is-isotope-grid .has-7-spans  { width: calc((58.333% * var(--scale)) - (var(--gutter-x) * 5 / 12)); }
    .is-isotope-grid .has-6-spans  { width: calc((50%     * var(--scale)) - (var(--gutter-x) * 6 / 12)); }
    .is-isotope-grid .has-5-spans  { width: calc((41.666% * var(--scale)) - (var(--gutter-x) * 7 / 12)); }
    .is-isotope-grid .has-4-spans  { width: calc((33.333% * var(--scale)) - (var(--gutter-x) * 8 / 12)); }
    .is-isotope-grid .has-3-spans  { width: calc((25%     * var(--scale)) - (var(--gutter-x) * 9 / 12)); }
    .is-isotope-grid .has-2-spans  { width: calc((16.666% * var(--scale)) - (var(--gutter-x) * 10 / 12)); }
    .is-isotope-grid .has-1-spans  { width: calc((8.333%  * var(--scale)) - (var(--gutter-x) * 11 / 12)); }
}

/* Optional: box sizing helps width calculations stay predictable */
.is-isotope-grid,
.is-isotope-grid .organizer-item,
.is-isotope-grid .organizer-item .item-inner-wrapper{
    box-sizing: border-box;
}

/* Remove Empty Layout Columns on Mobile */
@media screen and (max-width: 991px){
    .layout .grid .column.empty{
        display: none;
    }
}