.component__body-inner {
  font-size: 1.2rem;
  @media screen and (max-width: 896px) {
    font-size: 1rem;
  }
}
.timeline__inner {
  .timeline-wrapper {
    .w-50 {
      &:nth-child(1) {
        border-right: 8px solid #1f36c7;
      }
      @media screen and (max-width: 850px) {
        border-right: none !important;
        border-left: 8px solid #1f36c7;
      }
    }
    @media screen and (max-width: 850px) {
      .even.even-wrapper.row {
        flex-direction: column-reverse;
      }
      &:last-child {
        .timeline-content {
          margin-bottom: 0;
        }
      }
    }
  }
  .component__title {
    color: inherit;
  }
  .timeline-container {
    padding: 5rem 0 3rem;
    font-size: 1.25rem;
    .timeline-flag {
      max-width: 300px;
      margin-left: auto;
      color: @white;
      .year-wrapper {
        max-width: 185px;
        margin-left: auto;
        @media screen and (max-width: 850px) {
          margin-left: 0;
        }
        .bg-color-container {
          padding: 0.8rem 1rem 1rem;
          text-align: center;
          position: relative;
          z-index: 5;
        }
        position: relative;
        z-index: 3;
        &:after {
          content: "";
          position: absolute;
          top: 10px;
          left: 10px;
          right: 10px;
          bottom: 10px;
          box-shadow: 0px 10px 5px 5px rgba(0, 0, 0, 0.3);
          transform: rotate(-5deg);
          z-index: 0;
          @media screen and (max-width: 850px) {
            transform: rotate(5deg);
          }
        }
        h4 {
          font-size: 3rem;
          font-weight: 700;
          margin: 0;
        }
      }
      .title-wrapper {
        position: relative;
        z-index: 1;
        .bg-color-container {
          padding: 1.8rem 2rem 2rem;
          position: relative;
          z-index: 5;
        }
        p {
          margin: 0;
          font-weight: 500;
        }
        &:after {
          content: "";
          position: absolute;
          top: 15px;
          left: 15px;
          bottom: 15px;
          right: 15px;
          transform: rotate(-5deg);
          box-shadow: 0px 20px 15px 5px rgba(0, 0, 0, 0.2);
          @media screen and (max-width: 850px) {
            transform: rotate(5deg);
          }
        }

        span.noch {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          height: 60px;
          width: 60px;
          right: -34px;
          background-color: inherit;
          border-radius: 50%;
          box-shadow: 0 0 10px rgba(30, 30, 30, 0.5);
          @media screen and (max-width: 850px) {
            right: auto;
            left: -34px;
          }
          &:after,
          &:before {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
          }
          &:after {
            height: 60px;
            width: 60px;
            background-color: #fff;
            z-index: 2;
          }
          &:before {
            height: 30px;
            width: 30px;
            background-color: inherit;
            right: 15px;
            z-index: 3;
          }
        }
      }
      &.even {
        margin-left: 0;
        margin-right: auto;
        .year-wrapper {
          margin-left: 0;
          margin-right: auto;
          &:after {
            transform: rotate(5deg);
          }
        }
        .title-wrapper {
          &:after {
            transform: rotate(5deg);
          }
          span.noch {
            left: -34px;
            right: auto;
          }
        }
      }
      @media screen and (max-width: 850px) {
        margin-left: 0;
      }
    }
    .timeline-content {
      padding-bottom: 10rem;
      padding-left: 5rem;
      padding-right: 5rem;
      p {
        margin-top: 0;
        margin-bottom: 3rem;
        // color: #005eef;
        font-weight: 500;
        font-size: 1.5rem;
      }
      @media screen and (max-width: 850px) {
        padding: 0;
        margin-bottom: 4rem;
        .body-wrapper {
          padding: 2rem 1rem 0;
        }
        .img-wrapper {
          margin-left: -3px;
          img{
            margin-left: 0;
          }
        }
      }
    }
  }
}
