.data-classes__output {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-medium);
}

.data-classes__class {
  align-items: center;
  color: var(--color-black);
  display: flex;
  font-weight: 400;
  gap: 0.4125em;
  min-width: 9.786125em;
  text-decoration: none;
}

.data-classes__date {
  align-items: start;
  background: var(--color-white);
  border-radius: 0.25em;
  box-shadow:
    inset 0 0 0 1px rgba(var(--rgb-black), 0.125),
    0 0.1em 0.2em 0.05em rgba(var(--rgb-black), 0.05)
  ;
  display: grid;
  height: 1.6em;
  line-height: 1;
  min-width: 1.6em;
  overflow: hidden;
  text-align: center;
  width: 1.6em;
}

.data-classes__date dt {
  background: var(--color-red-dark);
  color: var(--color-white);
  font-size: 40%;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-loose);
  padding-bottom: 0.325em;
  padding-top: 0.35em;
  text-transform: uppercase;
}

.data-classes__date dd {
  font-size: 80%;
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: -0.0875em;
  margin-top: -0.1375em;
}

.data-classes__details {
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.375em;
}

.data-classes__details dt {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.0925em;
}



.data-classes--details .data-classes__class {
  min-width: 9.3em;
}



@media(hover: hover) {

  .data-classes__class:focus .data-classes__details dt,
  .data-classes__class:hover .data-classes__details dt {
    color: var(--color-black);
  }

}