* {
  color: #fff;
}

.main-container {
  background-color: grey;
  border: 2px solid #fff;
  padding: 20px;
  text-align: center;
}

.header {
  background-color: pink;
  border: 2px solid #fff;
  width: 100%;
  height: 100px;
}

.body {
  background-color: red;
  border: 2px solid #fff;
  width: 100%;

  display: flex;
  justify-content: space-between;
}

.left {
  background-color: lightgreen;
  border: 2px solid #fff;
  width: 15%;
}
.middle {
  background-color: lightseagreen;
  border: 2px solid #fff;
  width: 65%;
  padding: 20px 20px;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.right {
  background-color: lightcoral;
  border: 2px solid #fff;
  width: 15%;
}

.small-box {
  background-color: yellow;
  width: 30%;
  height: 15vw;
  margin-bottom: 10px;
}

.footer {
  background-color: black;
  border: 2px solid #fff;
  width: 100%;
  height: 100px;
}

/* RESPONSIVENESS */
@media only screen and (max-width: 600px) {
  .left {
    /* visibility: hidden; */
    display: none;
  }

  .right {
    /* visibility: hidden; */
    display: none;
  }

  .middle {
    background-color: lightseagreen;
    width: 100%;
    padding: 10px;
  }

  .small-box {
    background-color: yellow;
    /*width: 350px;*/
    height: 350px;
    width: 90%;
    margin-bottom: 10px;
  }
}