.about-section {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .about-eyebrow {
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--c-accent);
      opacity: 0.7;
      margin: 0 0 0.6rem;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .about-eyebrow::before,
  .about-eyebrow::after {
      content: "";
      display: block;
      width: 32px;
      height: 1px;
      background: var(--c-accent);
      opacity: 0.3;
  }

  .about-heading {
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      color: var(--c-text-primary);
      text-align: center;
      margin: 0 0 3rem;
      letter-spacing: -0.01em;
  }

  .about-list {
      display: flex;
      flex-direction: column;
      width: 100%;
      text-align: justify;
      padding-left: 1.2rem;
  }

  .about-item {
      padding: 2rem 2rem;
      border-bottom: 1px solid var(--c-border);
      position: relative;
      display: flex;
      gap: 30px;
      align-items: center;
      border-radius: 10px;
      background: var(--c-bg);
  }

  .about-item.reverse {
      flex-direction: row-reverse;
      background: var(--c-bg-2);
  }

  .about-item:first-child {
      border-top: 1px solid var(--c-border);
  }

  .about-item__image {
      display: flex;
      flex: 1;
      height: 100%;
  }

  .about-item__image img {
      width: 100%;
      height: 300px;
      object-fit: contain;
      border-radius: 10px;
  }

  .about-item__content {
      flex: 1;
  }

  /*
  .about-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5px;
    width: 3px;
    height: 0;
    background: var(--color-primary);
    transition: height 0.3s ease;
    border-radius: 0 0 3px 3px;
  }

  .about-item:hover::before {
    height: 100%;
  }
  */

  .about-item__title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--color-primary-lighter);
      margin: 0 0 0.75rem;
      letter-spacing: 0.01em;
  }

  .about-item__content {
      font-size: 0.9rem;
      color: var(--c-text-secondary);
      line-height: 1.5;
      margin: 0;
  }

  @media (max-width: 768px) {

      .about-item,
      .about-item.reverse {
          flex-direction: column;
          text-align: center;
      }

      .about-item__image img {
          width: 100%;
          height: auto;
      }
  }