.home-box {
  height: 480px;
  width: 100%;
}

.home-sub-box {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.bottom-right-box,
.top-right-box,
.bottom-left-box,
.top-left-box {
  position: absolute;
  border-radius: 2em;
  background-size: cover;
  color: white;
  text-align: center;
  background-color: rgb(212, 208, 207);
}

.bottom-right-box:hover,
.top-right-box:hover,
.bottom-left-box:hover,
.top-left-box:hover {
  background-image: none;
  background-color: white;
  box-shadow: 0 0 15px #000000;
  color: black;
  transition: box-shadow 1s, background-color 3s;
  cursor: pointer;
}

@media all and (min-width: 980px) {
  .home-sub-box {
    width: 480px;
    height: 480px;
  }

  .bottom-right-box,
  .top-right-box,
  .bottom-left-box,
  .top-left-box {
    width: 240px;
    height: 240px;
    line-height: 240px;
    font-size: 30px;
    box-shadow: 0 0 15px white;
  }

  .bottom-right-box {
    top: 240px;
    left: 240px;
  }

  .top-right-box {
    top: 40px;
    left: 200px;
  }

  .bottom-left-box {
    top: 200px;
    left: 40px;
  }

  .top-left-box {
    top: 0;
    left: 0;
  }
}

@media all and (min-width: 400px) and (max-width: 980px) {
  .home-sub-box {
    width: 300px;
    height: 300px;
  }

  .bottom-right-box,
  .top-right-box,
  .bottom-left-box,
  .top-left-box {
    width: 160px;
    height: 160px;
    line-height: 160px;
    font-size: 18px;
    box-shadow: 0 0 8px white;
  }

  .bottom-right-box {
    top: 140px;
    left: 140px;
  }

  .top-right-box {
    top: 20px;
    left: 120px;
  }

  .bottom-left-box {
    top: 120px;
    left: 20px;
  }

  .top-left-box {
    top: 0;
    left: 0;
  }
}

@media all and (max-width: 400px) {
  .home-sub-box {
    width: 250px;
    height: 250px;
  }

  .bottom-right-box,
  .top-right-box,
  .bottom-left-box,
  .top-left-box {
    width: 140px;
    height: 140px;
    line-height: 140px;
    font-size: 16px;
    box-shadow: 0 0 6px white;
  }

  .bottom-right-box {
    top: 110px;
    left: 110px;
  }

  .top-right-box {
    top: 10px;
    left: 100px;
  }

  .bottom-left-box {
    top: 100px;
    left: 10px;
  }

  .top-left-box {
    top: 0;
    left: 0;
  }
}