.hero {
  position: relative;
  z-index: 0;
  background-color: var(--wp--preset--color--primary);
  border-radius: 30px;
  overflow: hidden;
  height: 375px;

  >.container {
    height: 100%;

    .row {
      height: 100%;
    }
  }

  &:before {
    content: url(../../../assets/img/half-circle-big.svg);
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: -5px;
    width: 25%;
    opacity: 0.3;
  }

  &:after {
    content: url(../../../assets/img/half-circle-small.svg);
    position: absolute;
    right: 39px;
    bottom: 0;
  }

  .hero__titre {
    color: var(--wp--preset--color--base);
    margin: 0 0 20px;
  }

  .hero__texte {
    color: var(--wp--preset--color--base);
    margin: 0 0 50px;
    font-size: 1.0625rem;
  }

  .hero__content {
    position: relative;
    z-index: 1;
    padding: 2.25rem 0 3.4375rem;
    height: 100%;

    #breadcrumbs {
      color: #fff;

      a {
        color: #fff;
      }
    }
  }

  .hero__image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;

    &:before {
      content: '';
      background: #000000;
      background: linear-gradient(-90deg, rgba(0, 0, 0, 1) 0%, var(--wp--preset--color--primary) 100%);
      opacity: 0.3;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 30px;
    }
  }

  .hero__image {
    img {
      height: 100%;
      object-fit: cover;
      border-radius: 30px;
      width: 100%;
      object-position: top -100px right 0;
    }
  }
}

.hero-no-image {
  &:before {
    content: url(../../../assets/img/half-circle-big-white.svg);
  }

  &:after {
    content: url(../../../assets/img/half-circle-small-white.svg);
  }
}

.home {
  .hero {
    height: 624px;

    .hero__image {
      &:before {
        background: #000;
      }
    }
  }
}

/* <= 1200 */
@media (max-width: 1199.98px) {
  .hero { height: auto; }

  .hero .hero__content {
    padding: 4.5rem 0 2rem;
  }

  .hero:after {
    content: "" !important;
    position: absolute;
    right: 39px;
    bottom: 0;
    width: 160px;
    height: 50px;
    opacity: 0.5;
    background: url(../../../assets/img/half-circle-small.svg) no-repeat center / contain;
  }

  .hero-no-image:after {
    content: "" !important;
    background: url(../../../assets/img/half-circle-small-white.svg) no-repeat center / contain;
  }

  .home .hero { height: auto; }
}

/* <= 768 */
@media (max-width: 768px) {
  .hero .hero__image img { object-position: center; }
}