.hero {
  position: relative;
  * {
    transition: color 0.3s ease, background-color 0.3s ease;
  }
  figure {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    &:before {
      display: block;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 2;
    }
    img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      object-fit: cover;
      z-index: 1;
    }
  }
  .container {
    position: relative;
    padding-top: calc(var(--section-spacing) * 2.86);
    padding-bottom: calc(var(--section-spacing) * 2.86);
    color: var(--c-white);
    text-align: center;
    z-index: 2;
    @media (max-width: 1440px) {
      padding-top: calc(var(--section-spacing) * 2);
      padding-bottom: calc(var(--section-spacing) * 2);
    }
    @media (max-width: 1024px) {
      padding-top: calc(var(--section-spacing) * 1.4);
      padding-bottom: calc(var(--section-spacing) * 1.4);
    }
    h4 {
      margin: 0 0 1em;
      font-weight: 300;
      @media (max-width: 1024px) {
        margin: 0 0 0.7em;
      }
    }
    h1 {
      margin: 0 0 1.5em;
      @media (max-width: 1024px) {
        margin: 0 0 1.2em;
      }
    }
    .cta {
      display: flex;
      gap: 30px;
      justify-content: center;
      @media (max-width: 1280px) {
        gap: 20px;
      }
      @media (max-width: 576px) {
        flex-direction: column;
        align-items: center;
      }
      a {
        width: 210px;
        padding: 0 30px;
        @media (max-width: 1280px) {
          width: 180px;
        }
      }
    }
  }
}