/* ============================= GRID (grid.css — structure only) ============================= */
/* Clearfix */
.group:before, .group:after {content: ""; display: table;}
.group:after {clear: both;}
.group {zoom: 1;}

.row { width: 100%; max-width: 1400px; min-width: 320px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.row .row { min-width: 0; padding-left: 0; padding-right: 0; }

.column, .columns { margin-left: 2.08333%; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.column:first-child, .columns:first-child, .alpha { margin-left: 0; }
.column.omega, .columns.omega { float: right; }

.row .one.column { width: 6.42361%; }
.row .one.columns { width: 6.42361%; }
.row .two.columns { width: 14.93056%; }
.row .three.columns { width: 23.4375%; }
.row .four.columns { width: 31.94444%; }
.row .five.columns { width: 40.45139%; }
.row .six.columns { width: 48.95833%; }
.row .seven.columns { width: 57.46528%; }
.row .eight.columns { width: 65.97222%; }
.row .nine.columns { width: 74.47917%; }
.row .ten.columns { width: 82.98611%; }
.row .eleven.columns { width: 91.49306%; }
.row .twelve.columns { width: 100%; }

.row .push_one { margin-left: 10.59028%; }
.row .push_one:first-child { margin-left: 8.50694%; }
.row .push_two { margin-left: 19.09722%; }
.row .push_two:first-child { margin-left: 17.01389%; }
.row .push_three { margin-left: 27.60417%; }
.row .push_three:first-child { margin-left: 25.52083%; }
.row .push_four { margin-left: 36.11111%; }
.row .push_four:first-child { margin-left: 34.02778%; }

.row { *zoom: 1; }
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }

/* House gutter: swap the file's fixed 20px for our responsive gutter scale */
.row{ padding-left: var(--gutter); padding-right: var(--gutter); }

/* The grid file ships no small-screen behaviour for .columns, so we add our own stacking rules */
@media (max-width: 680px){
  .row .columns, .row .column{ width: 100% !important; float: none !important; margin-left: 0 !important; }
}
@media (min-width: 681px) and (max-width: 980px){
  .offer-grid .columns{ width: 50% !important; margin-left: 0 !important; }
  .offer-grid .columns:nth-child(odd){ clear: left; }
}

/* Alias: sections built before the grid import used .wrap — keep it mapped to .row */
.wrap{ max-width: 1400px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* A .row nested inside a .wrap would otherwise apply the gutter twice (once from .wrap, once from
   its own .row padding), pushing it out of alignment with titles/text that sit directly in the .wrap. */
.wrap .row{ padding-left: 0; padding-right: 0; min-width: 0; }