/* Portfolio masonry — works with slot classes, nth-child, or JS inline spans */
@media screen and (min-width: 901px) {
    #main-grid.gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        grid-auto-rows: 50px !important;
        gap: 15px !important;
        grid-auto-flow: dense !important;
    }

    #main-grid > .gallery-item {
        aspect-ratio: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 100px;
    }

    #main-grid > figure.gallery-item:nth-of-type(24n + 1),
    #main-grid > .gallery-item.slot-0 { grid-row: span 13; grid-column: span 6; }
    #main-grid > .gallery-item:nth-of-type(24n + 2),
    #main-grid > .gallery-item.slot-1 { grid-row: span 26; grid-column: span 6; }
    #main-grid > .gallery-item:nth-of-type(24n + 3),
    #main-grid > .gallery-item.slot-2 { grid-row: span 13; grid-column: span 6; }
    #main-grid > .gallery-item:nth-of-type(24n + 4),
    #main-grid > .gallery-item.slot-3 { grid-row: span 22; grid-column: span 5; }
    #main-grid > .gallery-item:nth-of-type(24n + 5),
    #main-grid > .gallery-item.slot-4 { grid-row: span 16; grid-column: span 3; }
    #main-grid > .gallery-item:nth-of-type(24n + 6),
    #main-grid > .gallery-item.slot-5 { grid-row: span 10; grid-column: span 4; }
    #main-grid > .gallery-item:nth-of-type(24n + 7),
    #main-grid > .gallery-item.slot-6 { grid-row: span 11; grid-column: span 4; }
    #main-grid > .gallery-item:nth-of-type(24n + 8),
    #main-grid > .gallery-item.slot-7 { grid-row: span 11; grid-column: span 3; }
    #main-grid > .gallery-item:nth-of-type(24n + 9),
    #main-grid > .gallery-item.slot-8 { grid-row: span 14; grid-column: span 5; }
    #main-grid > .gallery-item:nth-of-type(24n + 10),
    #main-grid > .gallery-item.slot-9 { grid-row: span 6; grid-column: span 4; }
    #main-grid > .gallery-item:nth-of-type(24n + 11),
    #main-grid > .gallery-item.slot-10 { grid-row: span 9; grid-column: span 7; }
    #main-grid > .gallery-item:nth-of-type(24n + 12),
    #main-grid > .gallery-item.slot-11 { grid-row: span 15; grid-column: span 4; }
    #main-grid > .gallery-item:nth-of-type(24n + 13),
    #main-grid > .gallery-item.slot-12 { grid-row: span 15; grid-column: span 8; }
    #main-grid > .gallery-item:nth-of-type(24n + 14),
    #main-grid > .gallery-item.slot-13 { grid-row: span 9; grid-column: span 7; }
    #main-grid > .gallery-item:nth-of-type(24n + 15),
    #main-grid > .gallery-item.slot-14 { grid-row: span 14; grid-column: span 5; }
    #main-grid > .gallery-item:nth-of-type(24n + 16),
    #main-grid > .gallery-item.slot-15 { grid-row: span 10; grid-column: span 4; }
    #main-grid > .gallery-item:nth-of-type(24n + 17),
    #main-grid > .gallery-item.slot-16 { grid-row: span 10; grid-column: span 3; }
    #main-grid > .gallery-item:nth-of-type(24n + 18),
    #main-grid > .gallery-item.slot-17 { grid-row: span 17; grid-column: span 5; }
    #main-grid > .gallery-item:nth-of-type(24n + 19),
    #main-grid > .gallery-item.slot-18 { grid-row: span 12; grid-column: span 7; }
    #main-grid > .gallery-item:nth-of-type(24n + 20),
    #main-grid > .gallery-item.slot-19 { grid-row: span 11; grid-column: span 6; }
    #main-grid > .gallery-item:nth-of-type(24n + 21),
    #main-grid > .gallery-item.slot-20 { grid-row: span 11; grid-column: span 6; }
    #main-grid > .gallery-item:nth-of-type(24n + 22),
    #main-grid > .gallery-item.slot-21 { grid-row: span 10; grid-column: span 4; }
    #main-grid > .gallery-item:nth-of-type(24n + 23),
    #main-grid > .gallery-item.slot-22 { grid-row: span 10; grid-column: span 4; }
    #main-grid > .gallery-item:nth-of-type(24n + 24),
    #main-grid > .gallery-item.slot-23 { grid-row: span 10; grid-column: span 4; }
}

@media screen and (max-width: 900px) {
    #main-grid > .gallery-item[class*="slot-"] {
        grid-row: auto !important;
        grid-column: auto !important;
    }
}