@import "variables";
@import "mixins";

section.numeric-list {
  .numeric-list-wrap {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 6.5rem;
      width: 1px;
      height: 100%;
      transform: translateX(-50%);
      // border-right: 1px dashed $black;
      background-image: linear-gradient(black 33%, rgba(255, 255, 255, 0) 0%);
      background-position: right top;
      background-size: 1px 5px;
      background-repeat: repeat-y;
    }
    .numeric-list-item {
      display: grid;
      grid-template-columns: 6.5rem 1fr;
      gap: 2.4rem;
      .number {
        color: $col-prm;
        font-weight: bold;
        font-size: 3.2rem;
        line-height: 1;
        padding-bottom: 4rem;
      }
    }
    &:has(span.rewrite-number) {
      .numeric-list-item {
        grid-template-columns: 12rem 1fr;
        .number {
          font-size: 2.4rem;
        }
      }
      &:after {
        left: 12rem;
      }
    }
  }
}
