.children-list {
  display: grid;
  gap: 10px;
}

.children-list__item {
  display: grid;
  gap: 10px 20px;
  grid-template-columns: max-content 1fr;
}

.children-list__photo--none::before {
  content: '—';
  font-size: calc(8 / 9 * 1rem);
  line-height: 1;
  font-weight: bold;
}

.children-list__detail {
  display: grid;
  gap: 5px 10px;
  grid-template-columns: 1fr max-content;
  align-items: flex-start;
}

.children-list__preview {
  grid-column: 1 / -1;
}

@media (hover: hover) {
  .children-list__name:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary-color-25);
  }
}