.header-box {
  position: relative;
  width: calc(100vw - 250px);
  height: calc((100vw - 250px) / 3);
  max-width: 1200px;
  margin: 10rem auto 4rem;

  &::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 2rem;
    border-radius: 6rem;
    background: #fffcb9;
    z-index: 2;
  }

  &::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 5rem;
    border-radius: 6rem;
    background: rgba(114, 150, 106, 0.3);
    z-index: 1;
  }

  .header-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0.6rem;
    border-radius: 6rem;
    background: #72966a;
    z-index: 3;
  }

  .header-title {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -80%);
    font-size: 4rem;
    font-style: italic;
    background: rgba(197, 190, 170, 0.7);
    height: 6rem;
    padding: 0 4rem;
    line-height: 6rem;
    text-align: center;
    backdrop-filter: blur(0.4rem);
    box-shadow: 0 0 2px 1px #43732e;
    z-index: 5;
    border-radius: 8rem;
    text-wrap: nowrap;

    &::after {
      position: absolute;
      display: block;
      content: attr(data-text);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-wrap: nowrap;
      color: #72966a;
      padding: 8px;
      -webkit-text-stroke: 8px transparent;
      -webkit-background-clip: text;
      background-color: #fef9e9;
    }
  }

  .header-img {
    position: relative;
    vertical-align: bottom;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6rem;
    z-index: 4;
    overflow: clip;
    object-fit: cover;
    object-position: center;

    img {
      width: 100%;
      position: absolute;
      transform: translateY(-14%);
      background: #6b875c;
    }
  }
}