.grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: -20px 0 20px -20px;
}
.grid--no_gutters {
  margin: 0;
}
.grid--no_gutters > .grid-item {
  padding: 0;
}
.grid .align--center,
.grid.align--center {
  justify-content: center;
}
.grid .align--right,
.grid.align--right {
  justify-content: flex-end;
  text-align: right;
}
.grid .valign--top,
.grid.valign--top {
  align-items: flex-start;
  align-self: flex-start;
}
.grid .valign--bottom,
.grid.valign--bottom {
  align-items: flex-end;
  align-self: flex-end;
}
.grid .valign--center,
.grid.valign--center {
  align-items: center;
  align-self: center;
}
.grid .valign--baseline,
.grid.valign--baseline {
  align-items: baseline;
  align-self: baseline;
}
.grid-item {
  flex: 1 1 0%;
  padding: 20px 0 0 20px;
  margin-bottom: 0;
}
.grid-item .grid {
  margin-bottom: 0;
  width: 100%;
}
.grid-item--spacer {
  flex-basis: auto;
}
@media (min-width: 980px) {
  .grid-item {
    min-width: 200px;
  }
  .grid-item--xxxs {
    min-width: 20px;
    max-width: 80px;
  }
  .grid-item--xxs {
    min-width: 60px;
    max-width: 140px;
  }
  .grid-item--xs {
    min-width: 140px;
    max-width: 200px;
  }
  .grid-item--s {
    max-width: 260px;
  }
  .grid-item--m {
    max-width: 320px;
  }
  .grid-item--l {
    max-width: 400px;
  }
  .grid-item--xl {
    max-width: 500px;
  }
  .grid-item--xxl {
    max-width: 650px;
  }
}
/*
    Non-responsive grid classes.
    ** For all screen sizes **

    1. hug -> grid item will only be the size of their content.
    2. fit [default] -> [default] all grid items will fit as much as possible on one line
    3. full -> grid item will occupy a full width
    4. 2,3,4 -> an item will be 50%, 33% and 25% width

*/
.cols--hug {
  min-width: 0;
  flex-basis: auto;
  flex-grow: 0;
}
.cols--fit {
  flex: 1 1 0%;
}
.cols--full {
  flex: 0 0 100%;
}
.cols--2 {
  flex: 0 0 auto;
  width: 50%;
}
.cols--3 {
  flex: 0 0 auto;
  width: 33.33%;
}
.cols--4 {
  flex: 0 0 auto;
  width: 25%;
}
@media (max-width: 1200px) {
  .l-cols--hug {
    min-width: 0;
    flex-grow: 0;
    flex-basis: auto;
  }
  .l-cols--fit {
    flex: 1 1 0%;
  }
  .l-cols--full {
    flex: 0 0 100%;
  }
  .l-cols--2 {
    flex: 0 0 auto;
    width: 50%;
  }
  .l-cols--3 {
    flex: 0 0 auto;
    width: 33.33%;
  }
  .l-cols--4 {
    flex: 0 0 auto;
    width: 25%;
  }
}
@media (max-width: 980px) {
  .m-cols--hug {
    min-width: 0;
    flex-grow: 0;
    flex: 1 1 0%;
  }
  .m-cols--fit {
    flex: 1 1 auto;
  }
  .m-cols--full {
    flex: 0 0 100%;
  }
  .m-cols--2 {
    flex: 0 0 auto;
    width: 50%;
  }
  .m-cols--3 {
    flex: 0 0 auto;
    width: 33%;
  }
  .m-cols--4 {
    flex: 0 0 auto;
    width: 25%;
  }
}
@media (max-width: 768px) {
  .s-cols--hug {
    min-width: 0;
    flex-grow: 0;
    flex-basis: 100%;
  }
  .s-cols--fit {
    flex: 1 1 0%;
  }
  .s-cols--full {
    flex: 0 0 100%;
  }
  .s-cols--2 {
    flex: 0 0 auto;
    width: 50%;
  }
  .s-cols--3 {
    flex: 0 0 auto;
    width: 33.33%;
  }
  .s-cols--4 {
    flex: 0 0 auto;
    width: 25%;
  }
}
@media (max-width: 480px) {
  .xs-cols--hug {
    min-width: 0;
    flex-grow: 0;
  }
  .xs-cols--fit {
    flex: 1 1 0%;
  }
  .xs-cols--full {
    flex: 0 0 100%;
  }
  .xs-cols--2 {
    flex: 0 0 auto;
    width: 50%;
  }
  .xs-cols--3 {
    flex: 0 0 auto;
    width: 33.33%;
  }
  .xs-cols--4 {
    flex: 0 0 auto;
    width: 25%;
  }
}
.cs-preview-element-wrapper .grid .grid-item {
  border: 1px dashed transparent;
}
.cs-preview-element-wrapper .grid .grid-item:hover {
  border-color: gray;
  position: relative;
}
.cs-preview-element-wrapper .grid .grid-item:hover:after {
  position: absolute;
  padding: 0 3px;
  top: -20px;
  left: 0;
  background: #2980b9;
  content: "Grid Item";
  font-family: monospace;
  color: white;
}