.key-features {
    --bg-color: #0a0a1e;
    --card-bg-color: #1a1a2e;
    --text-color: #ffffff;
    --text-secondary: #a0a0a0;
    --accent-color: #4040ff;
    --icon-color: #ffff00;

    background: linear-gradient(0deg, #060609 39.46%, #040415 98.93%);
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    color: var(--text-color);
    padding: 
      clamp(48px, 4rem, 999rem)
      clamp(24px, 2rem, 999rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .key-features__title {
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    margin-bottom: 2rem;
    text-align: center;
  }

  .key-features__card {
      border-radius: 24px;
      border: 1px solid var(--Colors-card-outline, #343434);
      background: var(--Colors-Nav-bar-background, #121318);
      backdrop-filter: blur(2px);
      padding: 3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
  }

  .key-features__content {
    flex: 1;
    margin-right: 2rem;
  }

  .key-features__feature-title {
      color: #F7F8FC;
      font-size: clamp(32px, 3.75vw, 999em);
      font-style: normal;
      font-weight: 800;
      line-height: 1.2em;
      text-transform: uppercase;
      margin: 0 0 19px 0;
      opacity: 0.8;
      max-width: 30vw;
  }
  @media (max-width: 768px) {
      .key-features__feature-title {
          max-width: 100%;
      }
  }

  .key-features__description {
      color: #757679;
      font-size: clamp(16px, 1.81vw, 999vw);
      font-weight: 500;
      line-height: 1.2;
      margin: 0;
      max-width: 28.33vw;
      opacity: 0.8;
  }

  .key-features__logo {
    background-color: #000;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
    font-weight: bold;
  }

  .key-features__button-text {
    font-weight: bold;
  }

  .key-features__icon img {
      width: 100%;
  }

  .key-features__placeholder {
      min-height: 50vh;
      position: relative;
      width: 80%;
  }
  /* > 1600 */
  @media (min-width: 1600px) {
      .key-features__placeholder {
          width: 60%;
      }
  }
  .key-features__card {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }


  @media (max-width: 768px) {
      .key-features__placeholder {
          width: 100%;
      }
      .key-features__icon {
          max-width: 41vw;
      }
      .key-features__card {
          flex-direction: column-reverse;
          padding: 2rem;
      }

      .key-features__content {
          margin-right: 0;
          margin-top: 2rem;
          text-align: center;
      }

      .key-features__feature-title {
          font-size: 2rem;
      }
      
      .key-features__description {
          width: 100%;
          max-width: 100%;
      }
  }