/* stylelint-disable selector-class-pattern, selector-no-type */
/* example */

@import 'index.css';

.example-1 {
  max-width: 600px;
  margin-left: var(--grid-gutter-m);
  column-count: 2;
  column-gap: var(--grid-gutter-m);
  text-align: justify;
}

.example-1 p {
  margin: var(--grid-spacing-sloth) 0 0 0;
}

.example-1 p:first-child {
  margin: 0;
}

.example-2 {
  overflow: hidden;
  width: 400px;
  margin: var(--grid-spacing-sloth) auto;
  padding-bottom: var(--grid-spacing-sloth);
  padding-left: var(--grid-gutter-m);
  background: #808080;
}

.example-2 div {
  box-sizing: border-box;
  padding: var(--grid-spacing-sloth) var(--grid-gutter-m) 0 0;
}

.example-2 .box2,
.example-2 .box3 {
  float: left;
  width: 50%;
}

.example-2 > div > div {
  min-height: 100px;
}