@use "../theme.scss" as *;
@use "../mixins.scss";

.gutter-margin,
.gutter-margin-t-b {
  margin-top: $grid-half-gutter-width;
  margin-bottom: $grid-half-gutter-width;
}

.gutter-margin,
.gutter-margin-l-r {
  margin-left: $grid-half-gutter-width;
  margin-right: $grid-half-gutter-width;
}

.grid-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  @include mixins.clearfix;

  & .grid-row {
    margin: 0 - $grid-half-gutter-width;
    width: auto;
  }
}

[class^="grid-span-"],
[class*=" grid-span-"] {
  box-sizing: border-box;
  padding: 0 $grid-half-gutter-width;
  float: left;
  display: block;
}

/* Grid spans classes for grid unit based divisions */

.grid-span-1 {
  width: 6.66666%;
}

.grid-span-2 {
  width: 13.33333%;
}

.grid-span-3 {
  width: 19.99999%;
}

.grid-span-4 {
  width: 26.66666%;
}

.grid-span-5 {
  width: 33.33333%;
}

.grid-span-6 {
  width: 39.99999%;
}

.grid-span-7 {
  width: 46.66666%;
}

.grid-span-8 {
  width: 53.33333%;
}

.grid-span-9 {
  width: 59.99999%;
}

.grid-span-10 {
  width: 66.66666%;
}

.grid-span-11 {
  width: 73.33333%;
}

.grid-span-12 {
  width: 79.99999%;
}

.grid-span-13 {
  width: 86.66666%;
}

.grid-span-14 {
  width: 93.33333%;
}

.grid-span-15 {
  width: 100%;
}

/* Modifier to center a grid column */

.grid-span-centered {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* The golden cut as grid units */

.grid-span-gcb {
  width: 38.2%;
}

.grid-span-gca {
  width: 61.8%;
}

/* Grid spans classes for percentage based divisions */

.grid-span-5p {
  width: 5%;
}

.grid-span-10p {
  width: 10%;
}

.grid-span-15p {
  width: 15%;
}

.grid-span-20p {
  width: 20%;
}

.grid-span-25p {
  width: 25%;
}

.grid-span-33p {
  width: 33.3333%;
}

.grid-span-45p {
  width: 45%;
}

.grid-span-50p {
  width: 50%;
}

.grid-span-70p {
  width: 70%;
}

.grid-span-75p {
  width: 75%;
}

.grid-span-80p {
  width: 80%;
}

.grid-span-85p {
  width: 85%;
}

.grid-span-100p {
  width: 100%;
}