.fc_banner {
  --color-text: var(--color-white);
  color: var(--color-text);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-inline: max(clamp(24px, 1.961vw + 12.706px, 48px), calc(50% - 760px));

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

  .banner_video {
    iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: auto;
      min-height: 100%;
      aspect-ratio: 16 / 9;
      pointer-events: none;
    }
  }

  &.small_banner {
    padding-block: clamp(80px, 5.229vw + 49.882px, 144px);
    background:
      linear-gradient(
        173deg,
        var(--color-dark-teal) 11.99%,
        rgba(43, 65, 81, 0) 47.3%
      ),
      linear-gradient(245deg, var(--color-dark-teal) 33.9%, #1e5a55 85.09%);

    .content {
      max-width: 768px;
    }
  }

  &.large_banner {
    padding-block: clamp(80px, 18.301vw + -25.412px, 304px);

    .content {
      position: relative;
      z-index: 2;
      max-width: 712px;

      .title.hero {
        font-weight: 300;
      }
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        268deg,
        rgba(32, 85, 84, 0) 24.03%,
        #264b53 61.16%,
        var(--color-dark-teal) 98.29%
      );
    }
  }

  /* responsive */
  @media (width >= 992px) {
    .graphic {
      display: inline-block;
      position: absolute;
      z-index: 2;
      pointer-events: none;
      bottom: 0;
      /* right: 0; */
      right: max(calc(0px - var(--gap-s)), calc(50% - 960px));
      width: 36.15426%;
      max-width: 694.156px;
      aspect-ratio: 698 / 373;

      &.green {
        background: bottom right / contain no-repeat
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3622 1944'%3E%3Cpath fill='%23c3c9c6' d='M1569 0h393l-701 1089H861z'/%3E%3Cpath fill='%2374837c' d='M1964 0h-175l220 357h185z'/%3E%3Cpath fill='%23bad98a' d='M682 631H575l226 357h107z'/%3E%3Cpath fill='%2382bf39' d='M2075 468h589l-964 1476h-584z'/%3E%3Cpath fill='%23bad98a' d='M2676 468h-399l964 1476h381z'/%3E%3Cpath fill='%2382bf39' fill-rule='evenodd' d='M220 1332H0l456-701h220z' clip-rule='evenodd'/%3E%3C/svg%3E");
      }

      &.teal {
        background: bottom right / contain no-repeat
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3622 1944'%3E%3Cpath fill='%23006761' d='M1569 0h393l-701 1089H861z'/%3E%3Cpath fill='%2364c1bb' d='M1964 0h-175l220 357h185z'/%3E%3Cpath fill='%237bcac5' d='M682 631H575l226 357h107z'/%3E%3Cpath fill='%23139990' d='M2075 468h589l-964 1476h-584z'/%3E%3Cpath fill='%237bcac5' d='M2676 468h-399l964 1476h381z'/%3E%3Cpath fill='%23139990' fill-rule='evenodd' d='M220 1332H0l456-701h220z' clip-rule='evenodd'/%3E%3C/svg%3E");
      }

      &.orange {
        background: bottom right / contain no-repeat
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3622 1944'%3E%3Cpath fill='%23dd1a32' d='M1569 0h393l-701 1089H861z'/%3E%3Cpath fill='%23f4795e' d='M1964 0h-175l220 357h185z'/%3E%3Cpath fill='%23b80b4b' d='M682 631H575l226 357h107z'/%3E%3Cpath fill='%23e76925' d='M2075 468h589l-964 1476h-584z'/%3E%3Cpath fill='%23f89b66' d='M2676 468h-399l964 1476h381z'/%3E%3Cpath fill='%23f26925' fill-rule='evenodd' d='M220 1332H0l456-701h220z' clip-rule='evenodd'/%3E%3C/svg%3E");
      }
    }
  }

  &.large_banner {
    .graphic {
      width: 43%;
      max-width: 825.594px;
    }
  }
}