.brick-wall {
  background-image: url("../../images/bricks-bg.jpg");
  background-position: center right;
  background-size: cover;
  height: fit-content;
  width: 100%;
}
.brick-wall .layer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.brick-wall .layer div {
  height: 90%;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
}
.brick-wall .layer div:hover {
  background-color: var(--color-accent);
  -webkit-transition: background-color 100ms linear;
  -ms-transition: background-color 100ms linear;
  transition: background-color 100ms linear;
}
.brick-wall .layer-sided div:first-child, .brick-wall .layer-sided div:last-child {
  width: 24vw;
}
.brick-wall .layer-sided div:first-child:hover, .brick-wall .layer-sided div:last-child:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
  .brick-wall .layer {
    height: 3em;
  }
  .brick-wall .layer div {
    width: 48vw;
  }
  .brick-wall .layer-sided div:first-child, .brick-wall .layer-sided div:last-child {
    width: 24vw;
  }
}
@media (min-width: 769px) {
  .brick-wall .layer {
    height: 22vh;
  }
  .brick-wall .layer div {
    width: calc(20vw - 20px);
  }
  .brick-wall .layer-sided div:first-child, .brick-wall .layer-sided div:last-child {
    width: calc(10vw - 20px);
  }
}

/*# sourceMappingURL=brick-wall.css.map */