@import "@/styles/variables";
@import "@/styles/mixins";

.developmentPath {
  color: $black;
}

.yearContent {
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(180deg, $grey 0%, $grey-light 100%);
  border-radius: 0.75rem;
  margin-top: $hl-6;

  &:last-child {
    margin-bottom: $hl-3;
  }

  .yearLeft {
    flex: 5;
    padding: $hl-8 0 $hl-7 $hl-7;

    .yearNumber {
      font-family: "Poppins", sans-serif;
      color: $blue;
      font-size: 2.25rem;
      font-weight: bold;
    }

    .monthContent {
      margin-top: $hl-8;

      .monthLoop {
        display: flex;

        &:not(:last-child) {
          margin-bottom: $hl-9;
        }

        .monthNumber {
          min-width: 3rem;
          max-width: 3rem;
          opacity: 0.6;
        }

        .monthDescription {
          flex: 1;
          background: transparent;
          border-radius: 0;
          @include p1();
          font-family: "Noto Sans SC", sans-serif;
          color: $black;
          white-space: break-spaces;
          -webkit-font-smoothing: inherit;
          line-height: 1.75;
          padding: 0;
          overflow: hidden;
        }
      }
    }
  }

  .imgOuter {
    flex: 3;
    max-width: 21rem;
    padding: $hl-7;
  }
}

.seeMore {
  @include link-arrow();
}

@media screen and (max-width: 767px) {
  .yearContent {
    .yearLeft {
      min-width: 100%;
      padding-right: 2rem;
      padding-bottom: 0;
    }

    .imgOuter {
      min-width: 100%;
      max-width: 100%;
    }
  }
}