.fc_banner {
  --shape-fill: var(--color-white);
  --color-headings: var(--color-white);
  --color-text: var(--color-white);
  background-color: var(--color-black);
  color: var(--color-text);
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-height) + var(--padding-s));
  padding-bottom: calc(
    clamp(39.19px, 9.051vw + 10.228px, 184px) + var(--padding-s)
  );
  overflow: hidden;

  .banner_image,
  .banner_video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -3;
  }

  .banner_video {
    iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100.5%;
      min-height: 100%;
      aspect-ratio: 16 / 9;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
  }

  .content {
    display: flex;
    flex-direction: row;

    .wp_content {
      > *:not(.button, .subheading) {
        margin-bottom: var(--gap-m);
      }

      > :last-child {
        margin-bottom: 0;
      }
    }

    &::before {
      content: "";
      width: 2px;
      background-color: var(--color-white);
      margin-right: var(--gap-m);
      border-radius: var(--border-radius-max);
      clip-path: inset(0 0 100% 0);
      animation: drawLineIn 1s forwards;
    }
  }

  .overlays {
    position: absolute;
    z-index: -2;
    inset: 0;

    &::before,
    &::after {
      content: "";
      position: absolute;
    }

    &::before {
      z-index: -1;
      inset: 0 0 50% 0;
      background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 38.26%,
        rgba(0, 0, 0, 0.8) 87.39%
      );
    }

    &::after {
      z-index: -2;
      inset: 0 20% 0 0;
      background: linear-gradient(
        269deg,
        rgba(0, 0, 0, 0) 0.44%,
        rgba(0, 0, 0, 0.6) 75.29%
      );
    }
  }

  &.first_child {
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: 0;
      bottom: -1px;
      display: block;
      width: 100%;
      height: clamp(39.19px, 9.051vw + 10.228px, 184px);
      background-color: var(--shape-fill);
      mask: top / clamp(433px, 100vw + 113px, 2033px)
        clamp(109px, 25.063vw + 28.8px, 510px) no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2033' height='510' fill='black' viewBox='0 0 2033 510'%3E%3Cpath fill='currentColor' d='M2033 255c0 140.833-455.1 255-1016.5 255C455.103 510 0 395.833 0 255S455.103 0 1016.5 0C1577.9 0 2033 114.167 2033 255'/%3E%3C/svg%3E");
      shape-rendering: crispEdges;
    }
  }

  &.large_banner {
    padding-top: calc(var(--header-height) + var(--padding-l));
    padding-bottom: calc(
      clamp(39.19px, 9.051vw + 10.228px, 184px) + var(--padding-l)
    );
  }

  &.large_banner {
    padding-top: calc(var(--header-height) + var(--padding-l));
    padding-bottom: calc(
      clamp(39.19px, 9.051vw + 10.228px, 184px) + var(--padding-l)
    );
  }

  /* responsive */
  @media (width >= 768px) {
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      right: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 960px));
      display: block;
      width: clamp(182.5px, 14.91vw + 96.618px, 365px);
      aspect-ratio: 1;
      background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1464 1464'%3E%3Cpath fill='%2356ae31' d='M1464 732A732 732 0 1 1 0 732a732 732 0 0 1 1464 0'/%3E%3Cpath fill='%23000' d='M643 400H356V218h772v182H841v866H643z'/%3E%3C/svg%3E");
    }

    &.large_banner {
      &::before {
        bottom: clamp(0px, 2.778vw + -21.333px, 32px);
        width: clamp(183px, 14.951vw + 96.882px, 366px);
      }
    }

    &.small_banner {
      &::before {
        bottom: calc(var(--gap-xs) * 2);
        width: clamp(121px, 9.886vw + 64.059px, 242px);
      }
    }
  }
}

@keyframes drawLineIn {
  to {
    clip-path: inset(0 0 0 0);
  }
}