/**
 * section: structure.grid-system
 * title: Grids / columns
 *
 * description: |
 *   Funding Circle is using the golden ratio grid system. This is different than the usual 12 columns grid system, offering more organic layouts.
 *
 *   Keep in mind that in this case the columns have widths depending on the context and not strictly on parent. If, in a standard grid system the sum of the "column-units" has to be a certain number (e.g. `4 + 4 + 8 = 12` columns grid), in a golden ratio grid system the widths vary depending on the siblings, so they don't have to be summed up to reach a certain number (e.g. `1 + 2` is as valid as `1 + 4 + 2 + 3`).
 *
 *   The columns "widths" are represented by a parameter that can take values from 1 to 8 (1 is the smallest proportion, 8 is the biggest).
 */
/**
 * section: structure.grid-system.utility-classes
 * title: Utility classes
 *
 * description: |
 *   Just like Bootstrap, you can use utility classes for fast prototyping. They are splitted in 4 categories: `small`, `medium`, `large`, `extra-large` for responsive prototyping. The approach is mobile-first, where the small columns will be applied accross all resolutions unless another class for a bigger breakpoint is applied.
 *
 *   The parent of the columns require the `.col-s-wrapper / .col-m-wrapper / .col-l-wrapper / .col-xl-wrapper` class on it (the classes are inclusive, so if you use `.col-s-wrapper` the others are not required).
 *
 *   Class structure: `.col-[s/m/l/xl]-[1-8]` (e.g. `.col-m-3` will apply a proportion of 3 on the column from medium screen onwards).
 *
 * markup: dependencies/grid-system/utility-classes
 */
/**
 * section: structure.grid-system.mixin
 * title: Column generator mixin
 *
 * description: |
 *   For more fine tuned layouts, you can use the mixin and generate more complex layouts between custom breakpoints. This can be used together with `breakpoints()` mixin as it just generates the widths.
 *
 *   The mixin has to be applied on the wrapper of the columns. Adding a comma in the list will generate a new row.
 *
 *   ```
 *   .column-mixin-example {
 *      // columns mixin adds default padding to each column
 *      @include columns(3 2 1, 4 2, 4 1 2 3);
 *      // columns-no-padding mixin does not add default padding to each column
 *      @include columns-no-padding(3 2 1, 4 2, 4 1 2 3);
 *   }
 *   ```
 *
 * markup: dependencies/grid-system/column-mixin
 */
/**
 * section: structure.grid-system.golden-paddings
 * title: Golden ratio margins
 *
 * description: |
 *   Sets the right and left margins for individual elements/sections, based on the ratio of the margin in proportion to the element/section itself
 *
 *   Sets golden ratio left/right paddings for elements:
 *
 *   ```
 *   golden-ratio-paddings(5, 3, 2)
 *   // the first parameter represents the ratio/proportion of the element content
 *   // 2nd parameter is the left margin
 *   // 3rd parameter is the right margin
 *   ```
 */
.col-s-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%; }

.col-s-wrapper > * {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: table-cell; }

.col-s-1 {
  width: 1%; }

.col-s-2 {
  width: 1.618%; }

.col-s-3 {
  width: 2.61792%; }

.col-s-4 {
  width: 4.2358%; }

.col-s-5 {
  width: 6.85353%; }

.col-s-6 {
  width: 11.08901%; }

.col-s-7 {
  width: 17.94201%; }

.col-s-8 {
  width: 29.03017%; }

.col-s-9 {
  width: 46.97082%; }

.col-s-10 {
  width: 75.99879%; }

@media only screen and (min-width: 480px) {
  .col-m-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%; }
  .col-m-wrapper > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: table-cell; }
  .col-m-1 {
    width: 1%; }
  .col-m-2 {
    width: 1.618%; }
  .col-m-3 {
    width: 2.61792%; }
  .col-m-4 {
    width: 4.2358%; }
  .col-m-5 {
    width: 6.85353%; }
  .col-m-6 {
    width: 11.08901%; }
  .col-m-7 {
    width: 17.94201%; }
  .col-m-8 {
    width: 29.03017%; }
  .col-m-9 {
    width: 46.97082%; }
  .col-m-10 {
    width: 75.99879%; } }

@media only screen and (min-width: 800px) {
  .col-l-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%; }
  .col-l-wrapper > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: table-cell; }
  .col-l-1 {
    width: 1%; }
  .col-l-2 {
    width: 1.618%; }
  .col-l-3 {
    width: 2.61792%; }
  .col-l-4 {
    width: 4.2358%; }
  .col-l-5 {
    width: 6.85353%; }
  .col-l-6 {
    width: 11.08901%; }
  .col-l-7 {
    width: 17.94201%; }
  .col-l-8 {
    width: 29.03017%; }
  .col-l-9 {
    width: 46.97082%; }
  .col-l-10 {
    width: 75.99879%; } }

@media only screen and (min-width: 1200px) {
  .col-xl-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%; }
  .col-xl-wrapper > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: table-cell; }
  .col-xl-1 {
    width: 1%; }
  .col-xl-2 {
    width: 1.618%; }
  .col-xl-3 {
    width: 2.61792%; }
  .col-xl-4 {
    width: 4.2358%; }
  .col-xl-5 {
    width: 6.85353%; }
  .col-xl-6 {
    width: 11.08901%; }
  .col-xl-7 {
    width: 17.94201%; }
  .col-xl-8 {
    width: 29.03017%; }
  .col-xl-9 {
    width: 46.97082%; }
  .col-xl-10 {
    width: 75.99879%; } }