* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Avenir, Helvetica Neue, sans-serif;
}

.flex {
  &--container {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    margin: 1rem auto;
    width: 95%;
    max-width: 48rem;
    background: lighten(goldenrod, 12.5%);
  }
  &--child {
    flex: 1 1 18rem;
    img {
      display: block;
      max-width: 100%;
      height: auto;
      opacity: .5;
    }
  }
}

.overlay {
  position: relative;
  &--content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    display: flex;
    background: rgba(crimson, .25);
    flex-direction: column;
    justify-content: center;
    transition: all 375ms linear;
    &:hover {
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 80%;
      height: 80%;
    }
    h3 { 
      margin: 0;
      font-weight: 300;
      font-size: 2rem;
    }
    h4 { 
      margin: 0;
      font-weight: 300;
      font-size: 1.25rem;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
  }
}


.btn {
  background: lighten(goldenrod, 12.5%);
  color: white;
  padding: 1rem;
  display: block;
  margin: 1rem auto;
  max-width: 10rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: .75rem;
  text-decoration: none;
  transition: all 375ms linear;
  &:hover {
   background: darken(goldenrod, 12.5%) 
  }
}
.reorder {
  transition: all 375ms linear;
  .one {
    order: 2;
  }
  .two {
    order: 4;
  }
  .three {
    order: 6;
  }
  .four {
    order: 1;
  }
  .five {
    order: 3;
  }
  .six {
    order: 5;
  }
}