.bg-base {
    opacity: 1 !important;
    position: absolute;
    background-color: #eeeeee;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.bg-layer {
    z-index: -13;
    background-color: #eeeeee;
    width: 100%;
    height: 100%;
    position: fixed;

}
.bg-container {
    opacity: 0.2;
    width: 100%;
    height: 100%;
    display:grid;
}
.bg-container img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.bg-border-header {
    top: 0;
}
.bg-border-footer {
    bottom: 0;
}
.bg-flex-line div{
    opacity: 0.2;
}
.bg-flex-line {
    z-index: -7;
    position: fixed;
    height: 3rem;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
}
.bg-flex-line .bg-line-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.bg-grid {
    grid-template-columns: [l0] 6% [l1] 6% [l2] 6% [l3] 6% [l4] 6% [l5] 6% [l6] 6% [l7] 6% [l8] 6% [l9] 6% [l10] 6% [l11] 6% [l12] 6% [l13] 6% [l14] 6% [l15] 1fr [l16];
    grid-template-rows:  [r0] 10% [r1] 10% [r2] 10% [r3] 10% [r4] 10% [r5] 10% [r6] 10% [r7] 10% [r8] 1fr [r9];
}
.bg-item-1 {
    grid-column: l0 / l4;
    grid-row: r0 / r2;
    background-color: #fffafa;
}
.bg-item-2 {
    grid-column: l4 / l6;
    grid-row: r0 / r2;
    background-color: #e0ffff;
}
.bg-item-3 {
    grid-column: l6 / l9;
    grid-row: r0 / r2;
    background-color: #f5fffa;
}
.bg-item-4 {
    grid-column: l9 / l16;
    grid-row: r0 / r1;
    background-color:  	#f0fff0;
}
.bg-item-5 {
    grid-column: l9 / l14;
    grid-row: r1 / r7;
    background-color: #fff8dc;
}
.bg-item-6 {
    grid-column: l14 / l16;
    grid-row: r1 / r9;
    background-color: #fff0f5;
}
.bg-item-7 {
    grid-column: l0 / l2;
    grid-row: r2 / r5;
    background-color: #ffffe0;
}
.bg-item-8 {
    grid-column: l2 / l9;
    grid-row: r2 / r7;
    background-color: #ffebcd;
}
.bg-item-9 {
    grid-column: l0 / l2;
    grid-row: r5 / r9;
    background-color: #f0f8ff;
}
.bg-item-10 {
    grid-column: l2 / l7;
    grid-row: r7 / r9;
    background-color:  	#fafad2;
}
.bg-item-11 {
    grid-column: l7 / l14;
    grid-row: r7 / r9;
    background-color: #fffff0;
}

@media (max-width: 767px) {
    .bg-grid {
        grid-template-columns: [l0] 12% [l1] 12% [l2] 12% [l3] 12% [l4] 12% [l5] 12% [l6] 12% [l7] 1fr [l8];
        grid-template-rows: [r0] 5% [r1] 5% [r2] 5% [r3] 5% [r4] 5% [r5] 5% [r6] 5% [r7] 5% [r8] 5% [r9] 5% [r10] 5% [r11] 5% [r12] 5% [r13] 5% [r14] 5% [r15] 5% [r16] 5% [r17] 1fr [r18];
    }
    .bg-item-1 {
        grid-column: l0 / l5;
        grid-row: r0 / r3;
    }
    .bg-item-2 {
        grid-column: l5 / l8;
        grid-row: r0 / r5;
    }
    .bg-item-3 {
        grid-column: l0 / l2;
        grid-row: r3 / r8;
    }
    .bg-item-4 {
        grid-column: l2 / l5;
        grid-row: r3 / r8;
    }
    .bg-item-5 {
        grid-column: l5 / l6;
        grid-row: r5 / r8;
    }
    .bg-item-6 {
        grid-column: l6 / l8;
        grid-row: r5 / r11;
    }
    .bg-item-7 {
        grid-column: l0 / l1;
        grid-row: r8 / r13;
    }
    .bg-item-8 {
        grid-column: l1 / l6;
        grid-row: r8 / r16;
    }
    .bg-item-9 {
        grid-column: l0 / l1;
        grid-row: r13 / r16;
    }
    .bg-item-10 {
        grid-column: l0 / l6;
        grid-row: r16 / r18;
    }
    .bg-item-11 {
        grid-column: l6 / l8;
        grid-row: r11 / r18;
    }

}

@media (max-width: 1200px) {
    .bg-grid {
        grid-template-columns: [l0] 8% [l1] 8% [l2] 8% [l3] 8% [l4] 8% [l5] 8% [l6] 8% [l7] 8% [l8] 8% [l9] 8% [l10] 8% [l11] 1fr [l12];
        grid-template-rows:   [r0] 8% [r1] 8% [r2] 8% [r3] 8% [r4] 8% [r5] 8% [r6] 8% [r7] 8% [r8] 8% [r9] 8% [r10] 8% [r11] 1fr [r12];
    }
    .bg-item-1 {
        grid-column: l0 / l3;
        grid-row: r0 / r1;
    }
    .bg-item-2 {
        grid-column: l3 / l7;
        grid-row: r0 / r3;
    }
    .bg-item-3 {
        grid-column: l7 / l10;
        grid-row: r0 / r6;
    }
    .bg-item-4 {
        grid-column: l10 / l12;
        grid-row: r0 / r10;
    }
    .bg-item-5 {
        grid-column: l0 / l1;
        grid-row: r1 / r8;
    }
    .bg-item-6 {
        grid-column: l1 / l3;
        grid-row: r1 / r8;
    }
    .bg-item-7 {
        grid-column: l3 / l7;
        grid-row: r3 / r6;
    }
    .bg-item-8 {
        grid-column: l3 / l8;
        grid-row: r6 / r10;
    }
    .bg-item-9 {
        grid-column: l8 / l10;
        grid-row: r6 / r10;
    }
    .bg-item-10 {
        grid-column: l0 / l3;
        grid-row: r8 / r12;
    }
    .bg-item-11 {
        grid-column: l3 / l12;
        grid-row: r10 / r12;
    }

}
