.achievements-sideMenu-list {
  letter-spacing: var(--letter-spacing-none);
  > dt {
    padding: 0.6rem 0.7rem;
    border-block-end: 1px solid currentColor;

    &:not(:first-child) {
      margin-block-start: 2rem;
    }
  }
  > dd a {
    display: block;
    padding: 0.7rem;
    border-block-end: 1px dashed var(--color-gray-800);
    font-size: var(--text-sm);
    color: var(--color-primary-300);

    @media (hover: hover) {
      &:any-link:hover {
        background-color: color-mix(
          in srgb,
          var(--color-primary-50),
          transparent 70%
        );
      }
    }
  }
}

h1::before {
  white-space: pre-line;
}

main {
  container-type: inline-size;

  a {
    color: var(--color-primary-300);
    text-decoration: underline;

    @media (hover: hover) {
      &:hover {
        text-decoration: none;
      }
    }
  }
}

.achievements-detail-time {
  font-size: var(--text-3xl);
  color: var(--color-primary-300);
  line-height: 1;
  font-weight: bold;
}

.achievements-detail-articles {
  display: grid;
  row-gap: 1.8rem;
  margin-block: 2rem;

  article {
    display: grid;
    row-gap: 1.2rem;
    background-color: var(--color-primary-50);
    padding: 1.8rem;

    > h2 {
      font-size: var(--text-xl);
      font-weight: normal;
    }
    > .body {
      display: grid;
      row-gap: 1.5rem;
      font-size: var(--text-lg);
    }
  }
}