/* 960 Grid System - 12 column
   Each unit = 80px (60px content + 10px margin each side)
   grid_n width = (80n - 20)px */

.container_12 {
    width: 960px;
    margin: 0 auto;
}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

.grid_1  { width:  60px; }
.grid_2  { width: 140px; }
.grid_3  { width: 220px; }
.grid_4  { width: 300px; }
.grid_5  { width: 380px; }
.grid_6  { width: 460px; }
.grid_7  { width: 540px; }
.grid_8  { width: 620px; }
.grid_9  { width: 700px; }
.grid_10 { width: 780px; }
.grid_11 { width: 860px; }
.grid_12 { width: 940px; }

.alpha { margin-left: 0; }
.omega { margin-right: 0; }

.container_12::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 960px) {
    .container_12 {
        width: 100%;
        padding: 0 1rem;
    }

    [class*="grid_"] {
        width: 100%;
        margin: 0;
        float: none;
        display: block;
    }
}