$spacing: 2rem;

*,
::before,
::after {
  box-sizing: border-box;
}

html {
  font-size: 1em;
}

.u-no-wrap {
  white-space: nowrap;
}


body {
  margin: 0;
  padding: $spacing;
}

.atoms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-auto-flow: row;
  grid-gap: $spacing $spacing;

  @media only screen and (min-width: 26rem) {
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  }

  &--rows {
    grid-template-columns: auto;
  }

  & + & {
    margin-top: $spacing;
  }

  hr {
    border: none;
    border-bottom: 1px solid #ffffff;
    width: 100%;
    height: 0;
  }

  & > * {
    padding: $spacing;
    box-shadow: 0 0 (math.div($spacing, 2)) lighten(#000000, 40%);
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-row-gap: $spacing;
    align-content: start;
    position: relative;
    overflow: hidden;
    background-color: white;

    &::before {
      font-size: .8rem;
      color: #b2b2b2;
      line-height: 1;
      padding-bottom: math.div($spacing, 1.414);
      font-family: "Courier New";
      //position: absolute;
      //top: 0;
      //left: $spacing;
      border-bottom: 1px solid #d8d8d8;
    }

    &::before {
      content: attr(title);
    }
  }
}

.atom-spacer {
    border: none;
    border-bottom: 1px solid #d8d8d8;
    width: 100%;
    height: 0;
    margin: ($spacing * 1.414) 0;
}