.ordered-list__variation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 48px;
  column-gap: 64px;

  & .ordered-list__post {
    position: relative;
    border-top: 2px solid #D9D8D6;

    & .ordered-list__post-link {
      display: contents;

      .ordered-list__post-content {
        padding: 12px 0 40px 0;
        width: 100%;
        display: flex;
        justify-content: space-between;

        & .ordered-list__post-title {
          font-weight: 700;
          font-size: 24px;
          line-height: 32px;
          color: #656566;
          max-width: 458px;
        }

        & .ordered-list__post-number {
          font-weight: 700;
          font-size: 16px;
          line-height: 24px;
          color: var(--color-gray);
        }
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      height: 2px;
      width: 0;
      background: #000000;
      transition: width 0.6s ease-in-out;
    }

    &.ordered-list__post--active::before {
      width: 100%;
    }

    &.ordered-list__post--active h2.ordered-list__post-title {
      color: #000000 !important;
      transition: color 0.5s ease-in-out;
    }
  }
}

@media (max-width: 820px) {
  .ordered-list__variation {
    row-gap: 24px;

    & .ordered-list__post .ordered-list__post-link {
      .ordered-list__post-content {
        padding: 12px 0 24px 0;

        & .ordered-list__post-title {
          font-size: 18px;
          line-height: 28px;
          max-width: 70%;
        }

        & .ordered-list__post-number {
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .ordered-list__variation {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}