/* AutoGrid frontend layout
   12-column responsive grid for Contao AutoGrid elements. */
.autogrid_row {
    --autogrid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--autogrid-gap);
    align-items: start;
    width: 100%;
}

.autogrid_row > .column {
    box-sizing: border-box;
    min-width: 0;
    grid-column: span 12;
}

.autogrid_row > .column > :first-child {
    margin-top: 0;
}

.autogrid_row > .column > :last-child {
    margin-bottom: 0;
}

.autogrid_row > .column img,
.autogrid_row > .column video,
.autogrid_row > .column iframe {
    max-width: 100%;
}

/* Desktop widths */
.autogrid_row > .column.col_1 { grid-column: span 1; }
.autogrid_row > .column.col_2 { grid-column: span 2; }
.autogrid_row > .column.col_3 { grid-column: span 3; }
.autogrid_row > .column.col_4 { grid-column: span 4; }
.autogrid_row > .column.col_5 { grid-column: span 5; }
.autogrid_row > .column.col_6 { grid-column: span 6; }
.autogrid_row > .column.col_7 { grid-column: span 7; }
.autogrid_row > .column.col_8 { grid-column: span 8; }
.autogrid_row > .column.col_9 { grid-column: span 9; }
.autogrid_row > .column.col_10 { grid-column: span 10; }
.autogrid_row > .column.col_11 { grid-column: span 11; }
.autogrid_row > .column.col_12 { grid-column: span 12; }

/* Tablet widths */
@media (max-width: 1024px) {
    .autogrid_row > .column.col_md_1 { grid-column: span 1; }
    .autogrid_row > .column.col_md_2 { grid-column: span 2; }
    .autogrid_row > .column.col_md_3 { grid-column: span 3; }
    .autogrid_row > .column.col_md_4 { grid-column: span 4; }
    .autogrid_row > .column.col_md_5 { grid-column: span 5; }
    .autogrid_row > .column.col_md_6 { grid-column: span 6; }
    .autogrid_row > .column.col_md_7 { grid-column: span 7; }
    .autogrid_row > .column.col_md_8 { grid-column: span 8; }
    .autogrid_row > .column.col_md_9 { grid-column: span 9; }
    .autogrid_row > .column.col_md_10 { grid-column: span 10; }
    .autogrid_row > .column.col_md_11 { grid-column: span 11; }
    .autogrid_row > .column.col_md_12 { grid-column: span 12; }
}

/* Mobile widths */
@media (max-width: 767px) {
    .autogrid_row {
        --autogrid-gap: 1rem;
    }

    .autogrid_row > .column.col_sm_1 { grid-column: span 1; }
    .autogrid_row > .column.col_sm_2 { grid-column: span 2; }
    .autogrid_row > .column.col_sm_3 { grid-column: span 3; }
    .autogrid_row > .column.col_sm_4 { grid-column: span 4; }
    .autogrid_row > .column.col_sm_5 { grid-column: span 5; }
    .autogrid_row > .column.col_sm_6 { grid-column: span 6; }
    .autogrid_row > .column.col_sm_7 { grid-column: span 7; }
    .autogrid_row > .column.col_sm_8 { grid-column: span 8; }
    .autogrid_row > .column.col_sm_9 { grid-column: span 9; }
    .autogrid_row > .column.col_sm_10 { grid-column: span 10; }
    .autogrid_row > .column.col_sm_11 { grid-column: span 11; }
    .autogrid_row > .column.col_sm_12 { grid-column: span 12; }
}