* {
  box-sizing: border-box;
}
.fas{
  font-size: 2rem;
}

.container {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  margin: 50px;
  padding: 5px;
}
.box {
  border: 5px solid white;
  padding: 10px;
  color: aliceblue;
  opacity: 60%;
  transition: 0.5s;
}
.box:hover{
  opacity: 100%;
}
.a {
  background-color: #4d1635;
}
.b {
  background-color: #222c3c;
}
.c {
  background-color: #154042;
}
.d {
  background-color: #5f7782;
}
.e {
  background-color: #382a1d;
}
.f {
  background-color: #11201e;
}
.g {
  background-color: #d4d6d5;
  color: black;
}
.h {
  background-color: #94a8b3;
  color: black;
}
.i {
  background-color: #999ea7;
  color: black;
}
.j {
  background-color: #d8b26e;
  color: black;
}
.k {
  background-color: #9e9199;
  color: black;
}
.l {
  background-color: #a86234;
  color: black;
}
@media screen and (max-width: 576px) {
  .box {
    flex-basis: 50%;
  }
  .c,
  .f,
  .i,
  .l {
    flex-basis: 100%;
  }
}

@media screen and (min-width: 576px) {
  .box {
    flex-basis: 50%;
  }
  .c,
  .f,
  .i,
  .l {
    flex-basis: 100%;
  }
}
@media screen and (min-width: 768px) {
  .box {
    flex-basis: 33.3%;
  }
  .d,
  .h,
  .l {
    flex-basis: 100%;
  }
}

@media screen and (min-width: 1200px) {
  .box {
    flex-basis: 25%;
  }
  .e,
  .f,
  .k,
  .l {
    flex-basis: 50%;
  }
}