.hero {
  padding-top: var(--wp--preset--spacing--medium);
  padding-bottom: var(--wp--preset--spacing--medium);
  background-color: var(--wp--preset--color--primary-accent);
  position: relative;

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

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

    #breadcrumbs {
      color: #fff;

      a {
        color: #fff;
      }
    }
  }

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

    &:before {
      content: '';
      background-color: var(--wp--preset--color--main);
      opacity: .6;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  .hero__image {
    img {
      height: 100%;
      object-fit: cover;
    }
  }


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

}