#subpages-area {
  display: grid;
  gap: 2em;
  min-height: 50vh;
}

.item-subpages {
  width: 100%;
  min-height: 200px;
  padding: .5em .5em 1em .5em;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  text-decoration: none;
  color: #000;
}

.item-subpages:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.item-subpages img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 1rem;
}
.item-subpages span {
  font-size: 1rem;
  text-align: center;
  color: #222222;
}

@media screen and (min-width:1256px) {
   #subpages-area{
    grid-template-columns: repeat(4, 1fr);
    padding: 5vh 12.5%;
  }
}

@media screen and (max-width:1256px) and (min-width:912px) {
   #subpages-area{
    grid-template-columns: repeat(3, 1fr);
    padding: 5vh 7.5%;
  }
}

@media screen and (max-width:912px) and (min-width:576px) {
   #subpages-area{
    grid-template-columns: repeat(2, 1fr);
    padding: 5vh 7.5%;
  }
}

@media screen and (max-width:576px){
   #subpages-area{
    grid-template-columns: repeat(1, 1fr);
    padding: 5vh 7.5%;
  }
  .item-subpages{
    margin: auto;
    max-width: 300px;
  }
}