#home {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
  max-width: 1500px;
  padding: 70px 15px 100px 15px;
  width: 100%;
  @media (max-width: 1300px) {
    align-items: center;
    flex-direction: column;
  }
  > div {
    width: 600px;
    @media (max-width: 1300px) {
      max-width: 600px;
      width: 100%;
      &:not(:nth-child(1)) {
        margin: 50px 0px 0px 0px;
      }
    }
    > a {
      align-items: center;
      display: flex;
      position: relative;
      text-decoration: none;
      @media (pointer: fine) {
        &:hover {
          cursor: pointer;
          > div {
            .circle {
              box-shadow: 0px 0px 4px 2px var(--colorGreen);
            }
            > img {
              &.hover {
                z-index: 2;
              }
            }
          }
        }
      }
      &.level-one {
        padding: 30px 0px 30px 20px;
        top: 2px;
        &:not(:first-of-type) {
          margin: 50px 0px 0px 0px;
        }
        > .background {
          background-color: var(--colorGreyTranslucent);
          border-radius: 0px 0px 30px 30px;
          height: calc(100% - 20px);
          left: 10px;
          position: absolute;
          top: 10px;
          width: calc(100% - 20px);
        }
        > .border {
          border-bottom: 2px solid var(--colorGreen);
          border-left: 2px solid var(--colorGreen);
          border-radius: 0px 0px 0px 40px;
          left: 0px;
        }
      }
      &.level-two {
        padding: 20px 20px 20px 0px;
        &.first {
          padding: 30px 20px 20px 0px;
          > .background {
            border-radius: 30px 30px 0px 0px;
            height: calc(100% - 10px);
          }
          > .border {
            border-radius: 0px 40px 0px 0px;
            border-top: 2px solid var(--colorGreen);
          }
        }
        > .background {
          background-color: var(--colorGreyTranslucent);
          height: 100%;
          position: absolute;
          right: 10px;
          width: calc(100% - 20px);
          z-index: -1;
        }
        > .border {
          border-right: 2px solid var(--colorGreen);
          right: 0px;
        }
      }
      > .border {
        height: 100%;
        position: absolute;
        top: 0px;
        width: 40%;
      }
      > .image-container {
        position: relative;
        > .circle {
          height: 80px;
          background-color: var(--colorGreenTranslucent);
          border-radius: 50%;
          left: 0px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 80px;
        }
        > img {
          position: relative;
          width: 80px;
          @media (pointer: coarse) {
            &.hover {
              z-index: 2;
            }
          }
          &.no-hover {
            position: absolute;
            inset: 0;
            z-index: 1;
          }
        }
      }
      > h1 {
        margin: 0px 15px 0px 20px;
      }
      > h2 {
        flex: 1;
        margin: 0px 20px 0px 15px;
        text-align: right;
      }
    }
  }
}