@charset "UTF-8";

/* === ====== === */
/* === Global === */
/* === ====== === */
/* === Responsive === */
:root {
    /* === Responsive === */
    --gap-desktop: 10px;
    --gap-tablet: 10px;
    --gap-mobile: 10px;
}

/* === Layout Grid de base === */
.ol-grid {
    display: grid;
    gap: var(--gap);
}

@media (min-width: 1200px) {
    .ol-grid {
        gap: var(--gap-desktop);
    }
}

@media (min-width: 900px) and (max-width: 1200px) {
    .ol-grid {
        gap: var(--gap-tablet);
    }
}

@media (max-width: 900px) {
    .ol-grid {
        gap: var(--gap-mobile);
    }
}

/* Générer les classes responsives pour la grille principale */
@media (min-width: 1200px) {
    .d1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .d2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .d3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .d4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .d5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .d6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .d7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .d8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .d9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .d10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .d11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .d12 {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media (min-width: 900px) and (max-width: 1200px) {
    .t1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .t2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .t3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .t4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .t5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .t6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .t7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .t8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .t9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .t10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .t11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .t12 {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media (max-width: 900px) {
    .m1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .m2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .m3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .m4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .m5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .m6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .m7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .m8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .m9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .m10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .m11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .m12 {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Générer les classes responsives pour les enfants */
@media (min-width: 1200px) {
    .d-col-1 {
        grid-column: span 1;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-1 {
        grid-column: span 1;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-1 {
        grid-column: span 1;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-1 {
        grid-column: span 1;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-2 {
        grid-column: span 2;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-2 {
        grid-column: span 2;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-2 {
        grid-column: span 2;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-2 {
        grid-column: span 2;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-3 {
        grid-column: span 3;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-3 {
        grid-column: span 3;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-3 {
        grid-column: span 3;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-3 {
        grid-column: span 3;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-4 {
        grid-column: span 4;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-4 {
        grid-column: span 4;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-4 {
        grid-column: span 4;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-4 {
        grid-column: span 4;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-5 {
        grid-column: span 5;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-5 {
        grid-column: span 5;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-5 {
        grid-column: span 5;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-5 {
        grid-column: span 5;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-6 {
        grid-column: span 6;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-6 {
        grid-column: span 6;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-6 {
        grid-column: span 6;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-6 {
        grid-column: span 6;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-7 {
        grid-column: span 7;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-7 {
        grid-column: span 7;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-7 {
        grid-column: span 7;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-7 {
        grid-column: span 7;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-8 {
        grid-column: span 8;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-8 {
        grid-column: span 8;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-8 {
        grid-column: span 8;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-8 {
        grid-column: span 8;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-9 {
        grid-column: span 9;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-9 {
        grid-column: span 9;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-9 {
        grid-column: span 9;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-9 {
        grid-column: span 9;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-10 {
        grid-column: span 10;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-10 {
        grid-column: span 10;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-10 {
        grid-column: span 10;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-10 {
        grid-column: span 10;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-11 {
        grid-column: span 11;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-11 {
        grid-column: span 11;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-11 {
        grid-column: span 11;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-11 {
        grid-column: span 11;
    }

    .d-row-4 {
        grid-row: span 4;
    }

    .d-col-12 {
        grid-column: span 12;
    }

    .d-row-1 {
        grid-row: span 1;
    }

    .d-col-12 {
        grid-column: span 12;
    }

    .d-row-2 {
        grid-row: span 2;
    }

    .d-col-12 {
        grid-column: span 12;
    }

    .d-row-3 {
        grid-row: span 3;
    }

    .d-col-12 {
        grid-column: span 12;
    }

    .d-row-4 {
        grid-row: span 4;
    }
}

@media (min-width: 900px) and (max-width: 1200px) {
    .t-col-1 {
        grid-column: span 1;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-1 {
        grid-column: span 1;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-1 {
        grid-column: span 1;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-1 {
        grid-column: span 1;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-2 {
        grid-column: span 2;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-2 {
        grid-column: span 2;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-2 {
        grid-column: span 2;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-2 {
        grid-column: span 2;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-3 {
        grid-column: span 3;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-3 {
        grid-column: span 3;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-3 {
        grid-column: span 3;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-3 {
        grid-column: span 3;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-4 {
        grid-column: span 4;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-4 {
        grid-column: span 4;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-4 {
        grid-column: span 4;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-4 {
        grid-column: span 4;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-5 {
        grid-column: span 5;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-5 {
        grid-column: span 5;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-5 {
        grid-column: span 5;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-5 {
        grid-column: span 5;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-6 {
        grid-column: span 6;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-6 {
        grid-column: span 6;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-6 {
        grid-column: span 6;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-6 {
        grid-column: span 6;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-7 {
        grid-column: span 7;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-7 {
        grid-column: span 7;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-7 {
        grid-column: span 7;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-7 {
        grid-column: span 7;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-8 {
        grid-column: span 8;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-8 {
        grid-column: span 8;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-8 {
        grid-column: span 8;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-8 {
        grid-column: span 8;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-9 {
        grid-column: span 9;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-9 {
        grid-column: span 9;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-9 {
        grid-column: span 9;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-9 {
        grid-column: span 9;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-10 {
        grid-column: span 10;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-10 {
        grid-column: span 10;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-10 {
        grid-column: span 10;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-10 {
        grid-column: span 10;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-11 {
        grid-column: span 11;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-11 {
        grid-column: span 11;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-11 {
        grid-column: span 11;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-11 {
        grid-column: span 11;
    }

    .t-row-4 {
        grid-row: span 4;
    }

    .t-col-12 {
        grid-column: span 12;
    }

    .t-row-1 {
        grid-row: span 1;
    }

    .t-col-12 {
        grid-column: span 12;
    }

    .t-row-2 {
        grid-row: span 2;
    }

    .t-col-12 {
        grid-column: span 12;
    }

    .t-row-3 {
        grid-row: span 3;
    }

    .t-col-12 {
        grid-column: span 12;
    }

    .t-row-4 {
        grid-row: span 4;
    }
}

@media (max-width: 900px) {
    .m-col-1 {
        grid-column: span 1;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-1 {
        grid-column: span 1;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-1 {
        grid-column: span 1;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-1 {
        grid-column: span 1;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-2 {
        grid-column: span 2;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-2 {
        grid-column: span 2;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-2 {
        grid-column: span 2;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-2 {
        grid-column: span 2;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-3 {
        grid-column: span 3;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-3 {
        grid-column: span 3;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-3 {
        grid-column: span 3;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-3 {
        grid-column: span 3;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-4 {
        grid-column: span 4;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-4 {
        grid-column: span 4;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-4 {
        grid-column: span 4;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-4 {
        grid-column: span 4;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-5 {
        grid-column: span 5;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-5 {
        grid-column: span 5;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-5 {
        grid-column: span 5;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-5 {
        grid-column: span 5;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-6 {
        grid-column: span 6;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-6 {
        grid-column: span 6;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-6 {
        grid-column: span 6;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-6 {
        grid-column: span 6;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-7 {
        grid-column: span 7;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-7 {
        grid-column: span 7;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-7 {
        grid-column: span 7;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-7 {
        grid-column: span 7;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-8 {
        grid-column: span 8;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-8 {
        grid-column: span 8;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-8 {
        grid-column: span 8;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-8 {
        grid-column: span 8;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-9 {
        grid-column: span 9;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-9 {
        grid-column: span 9;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-9 {
        grid-column: span 9;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-9 {
        grid-column: span 9;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-10 {
        grid-column: span 10;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-10 {
        grid-column: span 10;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-10 {
        grid-column: span 10;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-10 {
        grid-column: span 10;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-11 {
        grid-column: span 11;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-11 {
        grid-column: span 11;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-11 {
        grid-column: span 11;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-11 {
        grid-column: span 11;
    }

    .m-row-4 {
        grid-row: span 4;
    }

    .m-col-12 {
        grid-column: span 12;
    }

    .m-row-1 {
        grid-row: span 1;
    }

    .m-col-12 {
        grid-column: span 12;
    }

    .m-row-2 {
        grid-row: span 2;
    }

    .m-col-12 {
        grid-column: span 12;
    }

    .m-row-3 {
        grid-row: span 3;
    }

    .m-col-12 {
        grid-column: span 12;
    }

    .m-row-4 {
        grid-row: span 4;
    }
}

@media (min-width: 1200px) {
    .d-col-1 {
        grid-column: span 1;
    }

    .d-col-2 {
        grid-column: span 2;
    }

    .d-col-3 {
        grid-column: span 3;
    }

    .d-col-4 {
        grid-column: span 4;
    }

    .d-col-5 {
        grid-column: span 5;
    }

    .d-col-6 {
        grid-column: span 6;
    }

    .d-col-7 {
        grid-column: span 7;
    }

    .d-col-8 {
        grid-column: span 8;
    }

    .d-col-9 {
        grid-column: span 9;
    }

    .d-col-10 {
        grid-column: span 10;
    }

    .d-col-11 {
        grid-column: span 11;
    }

    .d-col-12 {
        grid-column: span 12;
    }
}

@media (min-width: 900px) and (max-width: 1200px) {
    .t-col-1 {
        grid-column: span 1;
    }

    .t-col-2 {
        grid-column: span 2;
    }

    .t-col-3 {
        grid-column: span 3;
    }

    .t-col-4 {
        grid-column: span 4;
    }

    .t-col-5 {
        grid-column: span 5;
    }

    .t-col-6 {
        grid-column: span 6;
    }

    .t-col-7 {
        grid-column: span 7;
    }

    .t-col-8 {
        grid-column: span 8;
    }

    .t-col-9 {
        grid-column: span 9;
    }

    .t-col-10 {
        grid-column: span 10;
    }

    .t-col-11 {
        grid-column: span 11;
    }

    .t-col-12 {
        grid-column: span 12;
    }
}

@media (max-width: 900px) {
    .m-col-1 {
        grid-column: span 1;
    }

    .m-col-2 {
        grid-column: span 2;
    }

    .m-col-3 {
        grid-column: span 3;
    }

    .m-col-4 {
        grid-column: span 4;
    }

    .m-col-5 {
        grid-column: span 5;
    }

    .m-col-6 {
        grid-column: span 6;
    }

    .m-col-7 {
        grid-column: span 7;
    }

    .m-col-8 {
        grid-column: span 8;
    }

    .m-col-9 {
        grid-column: span 9;
    }

    .m-col-10 {
        grid-column: span 10;
    }

    .m-col-11 {
        grid-column: span 11;
    }

    .m-col-12 {
        grid-column: span 12;
    }
}

.col-start-1 {
    grid-column-start: 1;
}

.col-start-2 {
    grid-column-start: 2;
}

.col-start-3 {
    grid-column-start: 3;
}

.col-start-4 {
    grid-column-start: 4;
}

.col-start-5 {
    grid-column-start: 5;
}

.col-start-6 {
    grid-column-start: 6;
}

.col-start-7 {
    grid-column-start: 7;
}

.col-start-8 {
    grid-column-start: 8;
}

.col-start-9 {
    grid-column-start: 9;
}

.col-start-10 {
    grid-column-start: 10;
}

.col-start-11 {
    grid-column-start: 11;
}

.col-start-12 {
    grid-column-start: 12;
}

.row-start-1 {
    grid-row-start: 1;
}

.row-start-2 {
    grid-row-start: 2;
}

.row-start-3 {
    grid-row-start: 3;
}

.row-start-4 {
    grid-row-start: 4;
}

/*# sourceMappingURL=avengers-grids.css.map */