.portfolio-hero {
  padding-bottom: 32px;
  padding-top: 96px;
  height: 60vh;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
}

.portfolio-hero--flowing {
  background-image: url('../img/flowing__hero.png');
  background-size: cover;
  background-position: center;
}
.portfolio-hero--ac {
  background-image: url('../img/ac__hero.png');
  background-size: cover;
  background-position: center;
}
.portfolio-hero--serendipity {
  background-image: url('../img/serendipity__hero.png');
  background-size: cover;
  background-position: center;
}

.portfolio-hero--clienspiu {
  background-image: url('../img/cliens/cliens__hero.jpg');
  background-size: cover;
  background-position: center;
}

.portfolio-hero--tuotempo {
  background-image: url('../img/tuotempo/tuotempo__hero.jpg');
  background-size: cover;
  background-position: center;
}
.portfolio-hero--eidoo {
  background-image: url('../img/eidoo/eidoo__hero.jpg');
  background-size: cover;
  background-position: center;
}
.portfolio-hero--mpg {
  background-image: url('../img/mpg/mpg__hero.jpg');
  background-size: cover;
  background-position: center;
}
.portfolio-hero--ristoranti {
  background-image: url('../img/ristoranti/R__hero.png');
  background-size: cover;
  background-position: center;
}

.portfolio-body {
  padding-top: 72px;
  padding-bottom: 96px;
  color: black !important;
}

.portfolio-hero__title {
  color: black;
}

.portfolio-body .paragraph--small {
  color: black;
}

.portfolio-body img, .portfolio-body blockquote {
  width: 100%;
  margin: 32px 0 40px;
}

.navigation__section {
  background-color: black;
  padding-top: 64px;
  padding-bottom: 120px;
  color: white;
  display: flex;
  justify-content: space-between;
}
.portfolio-hero--mobile {
  display: none;
}
.hero__back-cta {

}


@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .portfolio-hero {
    padding-bottom: 32px;
    height: 24vh;
  }
  .portfolio-hero--mobile {
    display: block;
  }
  .portfolio-hero--mobile .title {
    color: black!important;
  }
  .portfolio-hero__title-desktop {
    display: none;
  }
  .portfolio-hero .title {
    display: none;
  }
  .portfolio-hero .chip__container {
    display: none;
  }
  .portfolio-body {
    padding-top: 32px;
    padding-bottom: 72px;
  }
  .navigation__section p {
    font-size: 16px;
  }
}

@media only screen and (min-device-width: 480px) and (max-device-width: 768px) {}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1440px) {}