.about-us {
  display: grid;
  width: 100%;
}
.about-us > * {
  grid-area: 1 / 1;
}

.about-us > .about-us__wrapper {
  position: relative;
  place-self: center;
}
.about-us__wrapper {
  width: 100%;
  padding: var(--space--4) 0;
}

.about-us__header {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--space--8);
}

.about-us__title {
font-size: var(--font-size--2xl);
  background-image: var(--gradation--text-marker--1);
  background-position: left bottom;
  background-size: 100% 0.6em;
  background-repeat: no-repeat;

}

.about-us__grid {
  grid-area: about-us__grid;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: 1fr;
  grid-template-areas:
    "about-us__card--left about-us__card--right";
  gap: var(--space--2);
}
.about-us__card {
  border-radius: var(--radius--md);
  box-shadow: var(--shadow--md);

}

.about-us__card--left {
  grid-area: about-us__card--left;
  display: flex;
  flex-direction: column;
  padding: var(--space--2);
  margin: 0 var(--space--4);
}
.about-us__card--right {
  grid-area: about-us__card--right;
  display: flex;
  flex-direction: column;
  padding: var(--space--2);
  margin: 0 var(--space--4);
}

.about-us__feature-body {
  display: flex;
  flex-direction: column;
  padding: var(--space--4) 0;
}

.about-us__feature-title {
  text-align: center;
}

.about-us__feature-title span {
  background-image: var(--gradation--text-marker--1);
  background-position: left bottom;
  background-size: 100% 0.6em;
  background-repeat: no-repeat;
}

.about-us__feature-text {
  text-align: center;
}


@media (width <= 768px) {
  .about-us__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
      "about-us__card--left"
      "about-us__card--right";
    gap: var(--space--6)

  }

  .about-us__header {
    margin-bottom: var(--space--6);
  }

  .about-us__card--left {
    padding: var(--space--2) var(--space--4);
  }

  .about-us__card--right {
    padding: var(--space--2) var(--space--4);
  }
}

@media (width <= 668px) {
  .about-us__title {
    font-size: var(--font-size--xl);
  }
  .about-us__feature-title {
    font-size: var(--font-size--lg);
  }

  .about-us__feature-text {
    font-size: var(--font-size--md);
  }
}

@media (width <= 500px) {
  .about-us__header {
    margin-bottom: var(--space--2);
  }

  .about-us__title {
    font-size: var(--font-size--xl);
  }

  .about-us__feature-title {
    font-size: var(--font-size--md);
  }

  .about-us__feature-text {
    font-size: var(--font-size--sm);
  }
}