@import 'variable.scss';

/* ==========================================================================
 *
 * File Name:         Responsive Column layout
 * Description:       Varieties of column display for website
 * Editing Details:   Do NOT modify variables or code in this file as that may
 *                    cause Berry's responsive framework to malfunction
 * Source:            https://www.w3schools.com/css/css_website_layout.asp
 ============================================================================ */

/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
  }
  
/* Left and right column */
.column.side {
    width: 25%;
}

/* Middle column */
.column.middle {
    width: 50%;
}
  
/* Wide column */
.column.wide {
    width: 65%;
}

/* Even column */
.column.even {
    width: 30%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
  
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: get-map ($breakpoint:sm)) {
    .column.side, .column.middle, .column.wide, .column.even {
        width: 100%;
    }
}