.speciality {
  align-self: flex-end;
  width: 100%;
}

.speciality h3 {
  background: var(--color-black);
  font-weight: 300;
  text-align: right;
  padding: .25rem .5rem;
  color: var(--color-white);
}

.speciality p {
  text-align: center;
}

.speciality dl {
  display: grid;
  grid-template-areas: 
                "a b"
                "c d";
  line-height: 1;
  gap: .5rem .5rem;
  margin: 1rem .25rem;
}

.speciality dt {
  text-align: right;
  color: var(--color-red-darker);
}

.speciality dd {
  margin: 0;
}

.s1name {
  grid-area: a;
}
.s1value {
  grid-area: b;
}
.s2name {
  grid-area: c;
}
.s2value {
  grid-area: d;
}

@media (min-width: 640px) {
  .speciality {
    width: 85%;
  }
}