.mission-section {
  background: rgba(var(--bg-color-26));

  .mission-card {
    position: relative;
    border-radius: var(--border-radius-1) 0;
    padding: 80px 85px 43px 96px;
    background: linear-gradient(
      69deg,
      rgba(var(--bg-color-6)) 38%,
      rgba(var(--bg-color-14)) 85%
    );
    box-shadow: 0 10px 25px 0 rgba(var(--bg-color-6), 15%);
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: -38%;
      right: -10%;
      width: 520px;
      height: 520px;
      border-radius: var(--border-radius-2);
      background: rgba(var(--bg-color-1), 6%);
    }

    .mission-card__eyebrow {
      margin-bottom: 22px;

      .mission-card__eyebrow-text {
        font-size: var(--font-27);
        font-weight: 400;
        letter-spacing: var(--letter-spacing-22);
        color: rgba(var(--text-color-1), 78%);
        position: relative;
        padding-left: 46px;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0px;
          width: 32px;
          height: 1px;
          background-color: rgba(var(--bg-color-1), 50%);
        }
      }
    }

    .mission-card__statement {
      font-family: var(--font-source-serif-4);
      font-size: var(--font-9-2);
      font-weight: 700;
      line-height: 1.3;
      color: rgba(var(--text-color-1));
      margin-bottom: 62px;

      .highlight_italic {
        font-style: italic;
        color: rgba(var(--text-color-14));
      }
    }

    .mission-card__attribution {
      display: inline-flex;
      align-items: center;
      background: rgba(var(--bg-color-1), 12%);
      border-radius: var(--border-radius-2);
      padding: 26px;

      span {
        font-family: var(--font-source-serif-4);
        font-style: italic;
        font-weight: 700;
        font-size: var(--font-25);
        color: rgba(var(--text-color-1));
        line-height: 1.3;
      }
    }
  }

  @media (max-width: 1024px) {
    .mission-card {
      padding: 60px;
    }
  }

  @media (max-width: 767px) {
    .mission-card {
      padding: 30px;

      &::after {
        width: 320px;
        height: 420px;
      }

      .mission-card__statement {
        word-break: break-word;
      }

      .mission-card__attribution {
        padding: 12px 18px;
      }
    }
  }
}