client/css/_column.scss
.columns {
border-radius: 6px;
display: flex;
margin: 0;
padding: 0;
text-align: left;
width: 100%;
.column {
padding: 0 .4rem;
width: 100%;
&:first-of-type {
padding-left: 0;
}
&:last-of-type {
padding-right: 0;
}
}
.column-1-2 {
width: 50%;
}
.column-1-3 {
width: 33.333333%;
}
.column-2-3 {
width: 66.666667%;
}
.column-1-4 {
width: 25%;
}
.column-3-4 {
width: 75%;
}
.column-1-5 {
width: 20%;
}
.column-2-5 {
width: 40%;
}
.column-3-5 {
width: 60%;
}
}
@media (max-width: $page-breakpoint) {
.columns {
display: block;
width: 100%;
.column {
padding: 0;
width: 100%;
.column-1-2 {
width: 100%;
}
}
.column-1-3 {
width: 100%;
}
.column-2-3 {
width: 100%;
}
}
}