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

@brick-color: #bb6649;
@brick-border-radius: 2px;
@brick-width: 15%;
@brick-height: 3vw;
@brick-space: 2px;
@brick-side-space: 4px;

.brick(@width) {
  background-image: url("bricktexture.jpeg");
  width: @width;
  //height: @brick-height;
  padding: 15px;
  text-align: center;
  border-radius: @brick-border-radius;
  margin: @brick-space;
  box-shadow: 0 0 19px 1px darken(@brick-color, 20%) inset;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  text-shadow: 3px 4px 5px #000;
}

.row {
  display: flex;
  background: #ccc;

  &:first-child .brick {
    margin-top: @brick-side-space;
  }
  &:last-child .brick {
    margin-bottom: @brick-side-space;
  }

  &:nth-child(even) {
    .brick:first-child {
      display: none;
    }
    .brick:last-child {
      margin-right: @brick-space;
    }
    &::before,
    &::after {
      position: relative;
      content: "";
      .brick(calc(@brick-width/2));
    }
    &::before {
      margin-left: @brick-side-space;
    }
    &::after {
      margin-right: @brick-side-space;
    }
  }
}

.brick {
  .brick(@brick-width);

  &:last-child {
    margin-right: @brick-side-space;
  }
  &:first-child {
    margin-left: @brick-side-space;
  }
}

.heading {
  text-align: center;
  font-family: "Cinzel Decorative", cursive;
  margin-bottom: 0px;
  //color: #e1ae3a;
  color: crimson;
}
.subheading {
  text-align: center;
  font-family: "Playfair Display", serif;
  margin: 0px;
  //color: #e1ae3a;
}

.quote {
  text-align: center;
  font-style: oblique;
  font-size: medium;
  font-family: "Playfair Display", serif;
  margin: 5px;
  color: green;
}

.lead {
  text-align: center;
  font-family: "Playfair Display", serif;
  color: crimson;
  font-size: 1.25rem;
  font-weight: 300;
  margin: 0px;
}