.container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.row {
    margin-bottom: 2rem;
}

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

.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}

@media (min-width: 550px) {
    .column,
    .columns {
        margin-left: 4%;
    }
    
    .column:first-child,
    .columns:first-child {
        margin-left: 0;
    }

    .one.column,
    .one.columns          { width: 4.6666666667%; }
    .two.columns          { width: 13.3333333333%; }
    .three.columns        { width: 22%;            }
    .four.columns         { width: 30.6666666667%; }
    .five.columns         { width: 39.3333333333%; }
    .six.columns          { width: 48%;            }
    .seven.columns        { width: 56.6666666667%; }
    .eight.columns        { width: 65.3333333333%; }
    .nine.columns         { width: 74.0%;          }
    .ten.columns          { width: 82.6666666667%; }
    .eleven.columns       { width: 91.3333333333%; }
    .twelve.columns       { width: 100%; margin-left: 0; }
}

input,
textarea {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s;
}

input:focus,
textarea:focus {
    border-color: var(--accent-color);
    outline: none;
}