@media only screen and (max-width: 1000px) {
  .col {
    display: grid;
    float: initial;
    width: 100%;
  }

  .bg-blue,
  .bg-green,
  .bg-red,
  .bg-yellow {
    display: none;
  }

  .div-link {
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.35);
  }

  .div-link:focus,
  .div-link:hover {
    color: rgba(255, 255, 255, 0.35);
  }

  .div-link::after {
    font-size: 64px;
    margin-left: 250px;
    font-size: 20vmin;
    font-weight: bold;
  }

  .blue-link {
    background-color: #2196F3;
  }

  .blue-link::after {
    content: "f";
  }

  .red-link {
    background-color: #F44336;
  }

  .red-link::after {
    content: "i";
  }

  .green-link {
    background-color: #4CAF50;
  }

  .green-link::after {
    content: "v";
  }

  .yellow-link {
    background-color: #FFEB3B;
  }

  .yellow-link::after {
    content: "e";
  }

  .grey-link {
    background-color: rgba(158, 158, 158);
  }

  .grey-link::after {
    content: ".";
  }
}

@media only screen and (min-width: 850px) and (max-width: 900px) {
  .pxart-img {
    height: 60vh;
  }

  .fa-chevron-up {
    margin: 6vh 0 4vh 0;
  }

  .fa-chevron-down {
    margin: 5vh 0 0 0;
  }
}

@media only screen and (min-width: 750px) and (max-width: 850px) {
  .pxart-img {
    height: 55vh;
  }

  .fa-chevron-up {
    margin: 8vh 0 5vh 0;
  }

  .fa-chevron-down {
    margin: 5vh 0 5vh 0;
  }
}

@media only screen and (min-width: 650px) and (max-width: 750px) {
  .pxart-img {
    height: 45vh;
  }

  .fa-chevron-up {
    margin: 8vh 0 8vh 0;
  }

  .fa-chevron-down {
    margin: 10vh 0 8vh 0;
  }
}

@media only screen and (min-width: 550px) and (max-width: 650px) {
  .pxart-img {
    height: 40vh;
  }

  .fa-chevron-up {
    margin: 10vh 0 8vh 0;
  }

  .fa-chevron-down {
    margin: 10vh 0 4vh 0;
  }
}

@media only screen and (min-width: 450px) and (max-width: 550px) {
  .pxart-img {
    height: 40vh;
  }

  .fa-chevron-up {
    margin: 12vh 0 12vh 0;
  }

  .fa-chevron-down {
    margin: 12vh 0 12vh 0;
  }
}

@media only screen and (min-width: 350px) and (max-width: 450px) {
  .pxart-img {
    height: 30vh;
  }

  .fa-chevron-up {
    margin: 15vh 0 10vh 0;
  }

  .fa-chevron-down {
    margin: 10vh 0 15vh 0;
  }
}

@media only screen and (max-width: 350px) {
  .pxart-img {
    height: 20vh;
  }

  .fa-chevron-up {
    margin: 20vh 0 10vh 0;
  }

  .fa-chevron-down {
    margin: 10vh 0 20vh 0;
  }
}