.v-timeline {
  --color-green-decoration: #008F45;
  --color-pink: #D50869;

  background: var(--color-white);
  overflow: hidden;
  position: relative;
  z-index: 4;
}

.v-timeline__content {
  padding: 3.2rem 1.6rem;
  background: var(--color-grey);

  @media only screen and (min-width: 768px) {
    padding: 6rem 2rem;
    text-align: center;
  }
}

.v-step__background {
  display: none;

  @media only screen and (min-width: 1200px) {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -100;
  }
}

.v-timeline__title.h2 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 125%;
  margin-bottom: 1.6rem;

  @media only screen and (min-width: 768px) {
    font-size: 3.6rem;
  }

  @media only screen and (min-width: 1200px) {
    font-size: 4.8rem;
    max-width: 78.4rem;
    margin: 0 auto 1.6rem auto !important;
  }
}

.v-timeline__description {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 2.6rem;

  @media only screen and (min-width: 1200px) {
    max-width: 78.4rem;
    margin: 0 auto;
  }
}

.v-timeline .v-button {
  width: calc(100% - 3.2rem);
  margin: 1.6rem;

  @media only screen and (min-width: 768px) {
    width: auto;
    margin: 0 1rem;
  }
}

.v-timeline__links {
  @media only screen and (min-width: 768px) {
    text-align: center;
    margin: 0 0 8rem 0;
  }

  @media only screen and (min-width: 1200px) {
    margin: 6.4rem 0 10rem 0;
  }
}

.v-timeline .v-button:last-child {
  margin-top: 0.4rem;
}

.v-timeline__steps {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.6rem;

  @media only screen and (min-width: 768px) {
    padding: 5.7rem 4rem 13.3rem 4rem;
    gap: 10rem;

    .v-step:nth-child(even) {
      flex-direction: row-reverse;
    }

    .v-step:nth-child(even):before {
      content: '';
      position: absolute;
      inset: auto 6rem 5.6rem auto;
      width: 50%;
      height: 100%;
      flex-shrink: 0;
      border-radius: 0 40px 0 0;
      border-right: 12px solid #008F45;
      border-top: 12px solid #008F45;
    }

    .v-step:nth-child(even):not(:last-child):after {
      content: '';
      position: absolute;
      inset: 5.6rem 6rem auto auto;
      width: 50%;
      height: 100%;
      flex-shrink: 0;
      border-radius: 0 0 40px 0;
      border-right: 12px solid #008F45;
      border-bottom: 12px solid #008F45;
      z-index: -10;
    }

    .v-step:nth-child(odd):last-child:after {
      content: unset;
    }

    .v-step:nth-child(odd):not(:first-child):before {
      content: '';
      position: absolute;
      inset: auto auto 5.6rem 6rem;
      width: 50%;
      height: 100%;
      flex-shrink: 0;
      border-radius: 40px 0 0 0;
      border-left: 12px solid #008F45;
      border-top: 12px solid #008F45;
    }

    .v-step:nth-child(odd):after {
      content: '';
      position: absolute;
      inset: 5.6rem auto auto 6rem;
      width: 50%;
      height: 100%;
      flex-shrink: 0;
      border-radius: 0 0 0 40px;
      border-left: 12px solid #008F45;
      border-bottom: 12px solid #008F45;
      z-index: -10;
    }
  }

  @media only screen and (min-width: 1200px) {
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 1.6rem;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      inset: 0 0 50% 0;
      background: var(--color-grey);
    }

    .v-step__background {
      background: var(--color-grey);
      inset: 0 0.6rem 7.7rem 0.6rem;
      border-radius: 0 0 3rem 3rem;
    }

    .v-step:nth-child(even) {
      flex-direction: column;

      .v-step__background {
        background: var(--color-white);
        inset: 8.5rem 0.6rem 0 0.6rem;
        border-radius: 3rem 3rem 0 0;
      }
    }

    .v-step:first-child .v-step__background {
      border-radius: 0 0 3rem 0;
      inset: 0 0.6rem 7.7rem -100dvw;
    }

    .v-step:last-child .v-step__background {
      border-radius: 3rem 0 0 0;
      inset: 8.5rem -100dvw 0 0.6rem;
    }

    .v-step:nth-child(odd):last-child .v-step__background {
      border-radius: 0 0 0 3rem;
      inset: 0 -100dvw 7.7rem 0.6rem;
    }

    .v-step:nth-child(even):before {
      inset: 7.6rem auto auto -0.6rem;
      width: 40%;
      height: 40%;
      flex-shrink: 0;
      border-radius: 40px 0 0 0;
      border-right: unset;
      border-left: 12px solid #008F45;
      border-bottom: unset;
      border-top: 12px solid #008F45;
      z-index: -10;
    }

    .v-step:nth-child(even):not(:last-child):after {
      inset: 7.6rem -0.6rem auto auto;
      width: 40%;
      height: 40%;
      flex-shrink: 0;
      border-radius: 0 40px 0 0;
      border-left: unset;
      border-right: 12px solid #008F45;
      border-bottom: unset;
      border-top: 12px solid #008F45;
      z-index: -10;
    }

    .v-step:nth-child(odd):last-child:after {
      content: unset;
    }

    .v-step:nth-child(odd):not(:first-child):before {
      inset: 15.4rem auto auto -0.6rem;
      width: 40%;
      height: 40%;
      flex-shrink: 0;
      border-radius: 0 0 0 40px;
      border-right: unset;
      border-top: unset;
      border-left: 12px solid #008F45;
      border-bottom: 12px solid #008F45;
      z-index: -10;
    }

    .v-step:nth-child(odd):after {
      inset: 15.4rem -0.6rem auto auto;
      width: 40%;
      height: 40%;
      flex-shrink: 0;
      border-radius: 0 0 40px 0;
      border-right: 12px solid #008F45;
      border-left: unset;
      border-bottom: 12px solid #008F45;
      z-index: -10;
    }
  }

  .v-step:not(:last-child) .v-step__icon-wrapper:after {
    content: '';
    position: absolute;
    inset: auto auto -10rem 50%;
    transform: translateX(-50%);
    width: 1rem;
    height: 9rem;
    background: var(--color-green-decoration);

    @media only screen and (min-width: 768px) {
      content: unset;
    }
  }

  .v-step:first-child .v-step__icon-wrapper,
  .v-step:last-child .v-step__icon-wrapper {
    background: var(--color-pink);
  }

  .v-step:first-child .v-step__icon-wrapper:after,
  .v-step:last-child .v-step__icon-wrapper:after {
    @media only screen and (min-width: 768px) {
      content: '';
      position: absolute;
      inset: 50% auto auto -5rem;
      transform: translateY(-50%);
      width: 4rem;
      height: 1.2rem;
      background: var(--color-green-decoration);
    }

    @media only screen and (min-width: 1200px) {
      width: 100rem;
      inset: 50% auto auto -101rem;
    }
  }

  .v-step:last-child .v-step__icon-wrapper:after {
    @media only screen and (min-width: 1200px) {
      inset: 50% -101rem auto auto;
    }
  }

  .v-step:last-child:nth-child(even) .v-step__icon-wrapper:after {
    inset: 50% -5rem auto auto;

    @media only screen and (min-width: 1200px) {
      inset: 50% -101rem auto auto;
    }
  }
}