/* Container */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Row */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--grid-gutter) / -2);
}

/* Columns */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding: 0 calc(var(--grid-gutter) / 2);
    width: 100%;
}

.col-1  { max-width: 8.333%; flex: 0 0 8.333%; }
.col-2  { max-width: 16.666%; flex: 0 0 16.666%; }
.col-3  { max-width: 25%; flex: 0 0 25%; }
.col-4  { max-width: 33.333%; flex: 0 0 33.333%; }
.col-5  { max-width: 41.666%; flex: 0 0 41.666%; }
.col-6  { max-width: 50%; flex: 0 0 50%; }
.col-7  { max-width: 58.333%; flex: 0 0 58.333%; }
.col-8  { max-width: 66.666%; flex: 0 0 66.666%; }
.col-9  { max-width: 75%; flex: 0 0 75%; }
.col-10 { max-width: 83.333%; flex: 0 0 83.333%; }
.col-11 { max-width: 91.666%; flex: 0 0 91.666%; }
.col-12 { max-width: 100%; flex: 0 0 100%; }

/* Half / Third layout helpers */
.half {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gutter);
}

.half > * {
    flex: 1 1 calc(50% - var(--grid-gutter) / 2);
    min-width: 280px;
}

.thirds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gutter);
}

.thirds > * {
    flex: 1 1 calc(33.333% - var(--grid-gutter));
    min-width: 250px;
}

/* Clearfix */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

.clear {
    clear: both;
}