.details {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}

.details details summary {
  align-items: start;
  cursor: pointer;
  display: flex;
  gap: 0.4em;
  justify-content: start;
  list-style: none;
  padding-bottom: 0.8em;
  padding-top: 0.8em;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.details details summary p {
  font-size: var(--font-size-x-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  text-underline-offset: 0.0925em;
}

.details details summary:before {
  background: url('/assets/images/general/icon-details.svg') center center/100% auto no-repeat;
  content: '';
  height: 1.075em;
  min-width: 0.6875em;
  pointer-events: none;
  transition: transform var(--transition);
  width: 0.6875em;
}

.details details summary::-webkit-details-marker {
  display: none;
}

.details details article {
  display: grid;
  gap: 0.4875em;
  margin-bottom: -0.25em;
  margin-top: -0.4375em;
  padding: 0.0875em 0 1.1em 1.0875em;
  width: min(100%, 31em);
}

.details details article p,
.details details article ul {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
}

.details details article ul {
  display: grid;
  list-style: disc;
  padding-left: 1em;
}

.details details[open] summary:before {
  transform: rotate(90deg);
}

.details details:not(:last-child) {
  border-bottom: 1px solid var(--color-grey);
}



@media(hover: hover) {

  .details details:not([open]) summary:hover p {
    color: var(--color-blue);
    text-decoration: underline;
  }

}



@media(min-width: 64em) {

  .details {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }

}