html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}

img {max-width: 100%; height: auto;}

.columns > [class*='col-'] {float: left; min-height: 1px; padding: 0 20px; margin: 0 auto 20px; position: relative; overflow-wrap: break-word; -ms-word-wrap: break-word;}
.columns > [class*='col-'] [class*='col-'] {margin: 0 auto;}
.columns {position: relative; margin: $(column.gap.margin) -20px 0; }
.columns:after {content: ""; display: table; clear: both;}
.columns .middle {position: absolute; top: 50%;transform: translateY(50%);}

.columns .small {display: block;}

.col-1-1 {width: 100%;}
.col-3-4 {width: 75%;}
.col-7-10 {width: 70%;}
.col-2-3 {width: 66.666%;}
.col-3-5 {width: 60%;}
.col-1-2 {width: 50%;}
.col-2-5 {width: 40%;}
.col-1-3 {width: 33.333%;}
.col-3-10 {width: 30%;}
.col-1-4 {width: 25%;}
.columns .right {float: right;}
.columns-flex {display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center;}
.flex-bottom {align-items: end; -webkit-align-items: end;}