.about {
  padding-top: 10px;

  & .effect {
    position: sticky;
    top: 0;
    height: 80px;
    background: linear-gradient(var(--color-neutral-50), transparent);
  }

  & .paragraph {
    padding: 30px 0;
    background: linear-gradient(
      transparent,
      var(--color-neutral-50) 10%,
      var(--color-neutral-50) 90%,
      transparent
    );

    &:last-of-type {
      padding-bottom: 0;
    }

    & .counter {
      width: max-content;
      padding: 6px 16px;
      margin-bottom: 16px;
      font-size: var(--font-xsm);
      color: var(--color-foreground-subtle);
      background: linear-gradient(var(--color-neutral-100), transparent);
      border: 1px solid var(--color-neutral-300);
      border-radius: 20px 20px 20px 8px;

      & span {
        font-weight: 500;
        color: var(--color-foreground);
      }
    }

    & .title {
      margin-bottom: 8px;
      font-family: var(--font-heading);
      font-size: var(--font-md);
      font-weight: 600;
    }

    & .body {
      line-height: 1.6;
      color: var(--color-foreground-subtle);
    }
  }

  .button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    margin-top: 20px;
    font-size: var(--font-xsm);
    font-weight: 500;
    color: var(--color-foreground);
    cursor: pointer;
    background-color: transparent;
    border: 1px solid var(--color-neutral-200);
    border-radius: 50px;
    outline: none;
    transition: 0.2s;

    &::before {
      position: absolute;
      top: -1px;
      left: 50%;
      width: 70%;
      height: 1px;
      content: '';
      background: linear-gradient(
        90deg,
        transparent,
        var(--color-neutral-300),
        transparent
      );
      transform: translateX(-50%);
    }

    &:hover {
      background-color: var(--color-neutral-100);
    }

    &:focus-visible {
      outline: 1px solid white;
    }
  }
}