.hero {
  padding-top: 80px;
  padding-bottom: 120px;
  position: relative;
  background-color: #A990704D;

  @media(width < 787px) {
    padding-top: 0;
    padding-bottom: 0;
  }

  .breadcrumbs {
    position: absolute;
    top: 10px;
    z-index: 2;
    font-size: .875rem;
    padding: 12px 0;

    a {
      text-decoration: none;
    }

    @media(width < 787px) {
      display: none;
    }
  }


  .hero__content {
    position: relative;
    z-index: 1;
    padding: var(--wp--preset--spacing--large) 0 0;

    .breadcrumbs {
      color: #fff;

      a {
        color: #fff;
      }
    }

    .hero__titre {
      font-size: var(--wp--preset--font-size--xx-large);
      color: var(--wp--preset--color--main);
    }


  }

  .hero__btn {
    gap: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

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

    &:before {
      content: '';
      background: radial-gradient(13.65% 22.93% at 42.63% 34.79%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgba(169, 144, 112, 0) -4.18%, rgba(64, 48, 37, 0.56) 100%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  .hero__image {
    img {
      height: 100%;
      object-fit: cover;
      width: 100%;
      margin: 0 auto;
    }
  }


  &.alignfull,
  &.alignwide {
    .hero__content {
      max-width: var(--wp--style--global--content-size);
      margin: 0 auto;
    }
  }

  &.has-image {

    .hero__titre,
    .hero__content {
      color: var(--wp--preset--color--base);
    }
  }

  &.is-style-no-background {
    background-color: transparent;
    padding-bottom: inherit;
  }
}

.home {
  .hero {
    @media(width < 787px) {
      padding-top: 0;
      padding-bottom: 0;
    }

    .hero__content {
      max-width: none;
    }
  }
}