.purpose-section {
  /* padding: 80px 0px 120px; */
  background: rgba(var(--bg-color-1));
  position: relative;

  .purpose__heading {
    text-align: center;
    margin-bottom: 59.4px;

    .purpose__title {
      font-family: var(--font-source-serif-4);
      font-size: var(--font-9-2);
      font-weight: 700;
      color: rgba(var(--text-color-3));
      line-height: 1;
    }
  }

  .purpose__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 43.2px;
    max-width: 1123.2px;
    margin: 0 auto;

    .purpose__card {
      overflow: hidden;
      border-radius: var(--border-radius-4) 0 var(--border-radius-4) 0;
      background-color: rgba(var(--bg-color-1));
      box-shadow: 0 8px 20px rgba(var(--bg-color-6), 8%);
      transition: 0.4s;
      width: calc(33.33% - 28.8px);

      .purpose__image {
        width: 100%;
        aspect-ratio: 27 / 13;
        object-fit: cover;
        object-position: center center;
        display: block;
        height: unset;
      }

      .purpose__card-content {
        background: rgba(var(--bg-color-6));
        padding: 28.8px;
        border-top: 1px solid rgba(var(--border-color-1), 20%);
        height: stretch;

        .purpose__card-title {
          font-family: var(--font-inter);
          color: rgba(var(--text-color-1));
          font-size: var(--font-19);
          line-height: 1.2;
          font-weight: 600;
          letter-spacing: var(--letter-spacing-8);
        }

        .purpose__card__des {
          font-size: var(--font-24);
          color: rgba(var(--text-color-1));
          line-height: 1.25;
          margin-top: 20px;
        }

        .purpose__card-highlight {
          color: rgba(var(--text-color-14));
        }
      }
    }
  }

  @media (max-width: 1024px) {
    .purpose__card {
      width: calc(50% - 21.6px) !important;
    }
  }

  @media (max-width: 768px) {
    .purpose__cards {
      gap: 30px !important;

      .purpose__card {
        width: 100% !important;
      }
    }

    .purpose__heading {
      margin-bottom: 40px !important;
    }
  }
}