.energy-coefficient h3 {
  background: var(--color-black);
  padding: .25rem .5rem;
  font-weight: 300;
  color: var(--color-white);
}

.energy-coefficient dl {
  display: grid;
  grid-template-areas: 
                "a c"
                "b d";
  margin: 1rem 0;
  gap: 0 .75rem;
}

.energy-coefficient dt {
  font-size: .9rem;
  line-height: 1;
}

.energy-coefficient dd {
  margin: 0;
  color: var(--color-red-darker);
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1;
}

.ec1name {
  grid-area: a;
  text-align: right;
}
.ec1value {
  grid-area: b;
  text-align: right;
}
.ec2name {
  grid-area: c;
  text-align: left;
}
.ec2value {
  grid-area: d;
  text-align: left;
}

@media (min-width: 640px) {
  .energy-coefficient {
    align-self: flex-end;
    width: 70%;
  }

  .energy-coefficient h3 {
    text-align: right;
  }
}