#services {
  > p {
    text-align: justify;
  }
  > h2 {
    margin: 30px 0px 30px 0px;
  }
  > .list {
    display: flex;
    flex-direction: column;
    margin: 20px 0px 20px 0px;
    @media (max-width: 600px) {
      width: 100%;
    }
    @media (min-width: 601px) and (max-width: 700px) {
      width: 70%;
    }
    @media (min-width: 701px) and (max-width: 800px) {
      width: 60%;
    }
    @media (min-width: 801px) {
      width: 50%;
    }
    > a {
      cursor: pointer;
      font-weight: bold;
      padding: 10px 20px 10px 20px;
      margin: 10px 0px 10px 0px;
      text-decoration: none;
      @media (pointer: fine) {
        border: 1px solid var(--colorBlue);
        &:hover {
          background-color: var(--colorBlue);
          color: white;
        }
      }
      @media (pointer: coarse) {
        box-shadow: 1px 1px 3px var(--colorBlue);
      }
    }
  }
}