:root {
  --border-color: #fff;
}

.cd-container {
  border-left: .5rem solid var(--border-color);
  box-shadow: 0 3px 5px 0 #bbb;
  display: grid;
  grid-template-columns: auto 1fr;
  margin-bottom: 1rem;
  margin: 0;
  padding: 0;
}

.cd-container.edit {
  grid-template-columns: auto 1fr auto;
}

.cd-row {
  display: contents;
  padding: 1rem .6rem;
}

.cd-row > div {
  border-bottom: 1px solid #ccc;
}

.cd-row > div p {
  margin: 0;
}

.cd-row:last-of-type > div {
  border-bottom: 0;
}

.cd-row > div.cd-detail {
  padding: 1rem;
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
}

.cd-row > div.cd-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-inline: .5rem;
}

.cd-date {
  padding: 1rem 1.4rem;
  text-align: center;
}

.cd-date > div:first-of-type {
  text-transform: capitalize;
  font-size: 1.4rem;
  margin-bottom: .3rem;
}

.cd-date > div:last-of-type {
  font-weight: bolder;
  font-size: 1.6rem;
}

.cd-detail {
  display: flex;
  align-items: center;
}