Here's my solution. Not sure if it's what Guil had in mind, but it seems to work.

/* ================================= Base Element Styles ==================================== */

• { box-sizing: border-box; }

body { font-family: 'Varela Round', sans-serif; line-height: 1.6; color: #3a3a3a; }

p { font-size: .95em; margin-bottom: 1.8em; }

h2, h3, a { color: #093a58; }

h2, h3 { margin-top: 0; }

a { text-decoration: none; }

img { max-width: 100%; }

/* ================================= Base Layout Styles ==================================== */

/* ---- Navigation ---- */

.name { font-size: 1.25em; }

.banner, .name a, .main-nav a { text-align: center; }

.main-nav a { font-size: .95em; color: #3acec2; text-transform: uppercase; }

.main-nav a:hover { color: #093a58; }

.logo, .headline { margin-bottom: -5px; }

/* ---- Layout Containers ---- */

.banner { color: #fff; background: #3acec2; margin: auto; padding: 27px 0; }

.main-footer { background: #d9e4ea; padding: 2em 0; margin-top: 30px; text-align: center; }

/* ---- Page Elements ---- */

.logo { width: 190px; }

/* ================================= Media Queries ==================================== */

@media (min-width: 825px) {

.name { float: left; margin-left: 45px; }

.main-nav { float: right; margin: 17px 25px 0 0; }

.main-nav li { float: left; padding-right: 20px; }

.col { float: left; text-align: justify; }

.secondary { width: 30%; padding-right: 20px; }

.primary { width: 40%; padding: 0 10px; }

.tertiary { width: 30%; padding-left: 20px; }

.mainbod { margin: 25px 30px; }

/* ---- Float clearfix ---- */

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

}

@media (max-width:824px) and (min-width: 450px) { .name { text-align:center; margin-top: 25px; }

.main-nav { margin-bottom: 25px; }

.main-nav li { text-align:center;

}

/* .col { float: left; text-align: justify; } */

.secondary { width: 50%; padding-right: 20px; float:left; }

.primary { width: 50%; padding: 0 10px; float:right; }

.tertiary { width: 100%; padding-left: 20px; clear: both; }

.mainbod { margin: 25px 30px; text-align:justify; }

/* ---- Float clearfix ---- */

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

}

@media (max-width: 449px) { .name { text-align:center; margin-top: 25px; }

.main-nav { margin-bottom: 25px; }

.main-nav li { text-align:center;

}

.mainbod { margin: 25px 30px; text-align:justify; } }