.container-box {
  background-color: black;
  width: 100%;
  height: 55vh;
  overflow: hidden;
}

.palette {
  display: flex;
  height: 100%;
  width: 100%;
}

.color {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  letter-spacing: 1px;
  transition: flex 0.7s linear;

}

.content {
  z-index: 2;
  position: relative;
  opacity: 0;
  transition: opacity 0.3s linear;
}

.color:nth-child(1) {


  background-image: url("../img/autolavaggio.jpg");
  background-size: cover;
  background-position: 30% 50%;
  height: 100%;
}

.color:nth-child(2) {
  background-image: url("../img/spazzole-dettaglio.jpg");
  background-size: cover;
  background-position: 30% 50%;
  height: 100%;
}

.color:nth-child(3) {
  background-image: url("../img/aspiratura.jpg");
  background-size: cover;
  background-position: 30% 50%;
  height: 100%;
}

.color:nth-child(4) {

  background-image: url("../img/asciugatura.jpg");
  background-size: cover;
  background-position: 30% 50%;
  height: 100%;
}

.overlay {
  display: flex;
  align-items: center;
  height: 100%;
  background-color: var(--black-trasparent);
  opacity: 0
}

.overlay:hover {
  transition: linear 0.6s;
  opacity: 1;
}

.color:hover {
  flex: 1.5;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.color:hover .content {
  opacity: 1;
}

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

  .container-box {
    height: 75vh;
  }


}

@media only screen and (max-width:1305px) {
  .container-box {
    height: unset;
    overflow: visible;
  }

  .color {
    flex: unset;
  }

  .color:nth-child(1),
  .color:nth-child(2),
  .color:nth-child(3),
  .color:nth-child(4) {
    aspect-ratio: 16/9;
  }

  .overlay {
    opacity: 1;
    height: auto;
  }

  .content {
    opacity: 1;
  }

  .color {
    transition: unset;
  }
}

@media only screen and (max-width:992px) {
  .back-team {
    aspect-ratio: 4 / 3;
  }

  .back-autolavaggio, .back-spazzole, .back-asciugatura, .back-aspiratura{
    background-size: cover;
    min-height:35vh;
  }
  .back-autolavaggio{
    background-position:  center;
    background-image: url("../img/autolavaggio.jpg");
  }
  .back-spazzole{
    background-image: url("../img/spazzole-dettaglio.jpg");
  }
  .back-asciugatura{
    background-position: right;
    background-image: url("../img/asciugatura.jpg");
  }
  .back-aspiratura{
    background-position: right;
    background-image: url("../img/aspiratura.jpg");
  }


}

@media only screen and (max-width:580px) {
  
  .overlay {
    opacity: 1;
  }

  .content {
    opacity: 1;
  }

  #map {
    height: 30vh;
  }
}