div.works_top {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 10px;
  /* Togliere una volta ultimato */
}
div.works_middle {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-column-gap: 10px;
  /* Togliere una volta ultimato */
}
div.works_bottom {
  display: grid;
  grid-template-columns: 100%;
  /* Togliere una volta ultimato */
} 

div.works .single_work .img{
  display: flex;
  justify-content: center;
  padding: 20px;
}

div.works .single_work .top .img{
  align-items: center;
}

div.works .single_work .left .img,
div.works .single_work .right .img{
  align-items: end;
}

div.works .single_work .title{
  margin-bottom: 20px;
}

div.works .single_work .title p{
  font-size: 30px;
  color: black;
  margin-top: 0px;
}

div.works .left,
div.works .right,
div.works .top{
  height: 450px;
}

div.works .left{
  display: grid;
  grid-template-columns: 20% 80%;

}

div.works .right{
  display: grid;
  grid-template-columns: 80% 20%;
}

div.works .top{
  display: grid;
  grid-template-rows: 20% 80%;
}

div.works .wallpaper{
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Togliere una volta ultimato */
}

.filter-button-group{
  width: 400px;
  margin-bottom: 30px;
}

.filter-button-group button.is-checked {
  text-decoration: underline;
}

.filter-button-group button.button {
  width: 49%;
  background-color: transparent;
  color: black;
  font-size: 20px;
  text-align: left;
  padding: 5px;
}

.element-item.hide {
  animation: fadeOut 0.5s forwards;
}

.element-item.show {
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* +*+*+*+*+*+*+*+*+*+ */
/* RESPONSIVE */
/* News Unsocials */
/* +*+*+*+*+*+*+*+*+*+ */

@media screen and (max-width: 959px) {

  div.works_middle {
    grid-template-columns: 50% 50%;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    /* Togliere una volta ultimato */
  }

  div.works .single_work .title p{
    font-size: 20px;
  }

  div.works .left{
    display: grid;
    grid-template-columns: 30% 70%;
  
  }
  
  div.works .right{
    display: grid;
    grid-template-columns: 70% 30%;
  }

  div.works .top{
    display: grid;
    grid-template-rows: 30% 70%;
  }

  div.works .single_work .title{
    background-color: black;
  }

  div.works .single_work .title p{
    color: #fff;
    padding: 10px;
  }

}

@media screen and (max-width: 460px) {

  div.works_middle {
    grid-template-columns: 100%;
    grid-column-gap: 10px;
    /* Togliere una volta ultimato */
  }

}