about.scss

.about {
  text-align: center;
  //padding-top: 5rem;
  //padding-bottom: 5rem;

  .about_logo {
    font-size: 90px;
    width: 120px;
    height: 120px;
    margin-bottom: 2rem;
    border-radius: 50%;
  }

  .big_title {
    font-weight: 600;
    margin-bottom: 1rem;
  }

  .subtitle {
    letter-spacing: 3px;
    margin-bottom: 2rem;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);

    }
    100% {
      transform: scale(1);
    }
  }

  .start_button {
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.5s;

    @media (min-width: 1536px) {
      animation: pulse 1.7s ease infinite;

    }

    span {
      position: absolute;
      width: 25%;
      height: 100%;
      background-color: #923d31;
      transform: translateY(150%);
      border-radius: 50%;
      left: calc((var(--n) - 1) * 25%);
      transition: 0.5s;
      transition-delay: calc((var(--n) - 1) * 0.1s);
      z-index: -1;
    }

    &:hover {
      color: #FFF2D5;
    }

    &:hover span {
      transform: translateY(0) scale(2);
    }

    & span:nth-child(1) {
      --n: 1;
    }

    & span:nth-child(2) {
      --n: 2;
    }

    & span:nth-child(3) {
      --n: 3;
    }

    & span:nth-child(4) {
      --n: 4;
    }


  }


}