.contact {
  display: grid;
  grid-template-columns: calc(2 * var(--grid-6-column) + 1 * var(--grid-6-gap)) calc(4 * var(--grid-6-column) + 3 * var(--grid-6-gap));
  gap: 0 var(--grid-6-gap);
}
.contact p, 
.contact ul {
  color: var(--color-on--muted);
  font-style: italic;
}
.contact ul {
  display: flex;
  flex-flow: row wrap;
  gap: 0 0.25em;
}
.contact ul li {
  list-style: none;
}
.contact ul li:not(:last-child):after {
  content: ", ";
}
.contact a {
  text-decoration: underline;
}
@media screen and (max-width: 29.938em) {
  .contact dl {
    --display: block;
  }
}
@media screen and (min-width: 30em) {
  .contact dl {
    --dl-columns: 1fr 3fr;
    /*grid-template-columns: 1fr 3fr;*/
  }
}
@media screen and (min-width: 60em) {
  .contact {
    gap: 0 var(--grid-12-gap);
    /*grid-template-columns: 2fr 1fr 5fr 4fr;*/
    grid-template-columns: calc(2 * var(--grid-12-column) + 1 * var(--grid-12-gap)) var(--grid-12-column) calc(5 * var(--grid-12-column) + 4 * var(--grid-12-gap)) calc(4 * var(--grid-12-column) + 3 * var(--grid-12-gap));
    grid-template-areas:
     ". image text .";
  }
  .contact > *:first-child {
    grid-area: image;
  }
  .contact > *:last-child {
    grid-area: text;
  }
}




/*
.contact dl dd {
  margin: 0;
}
@media screen and (min-width: 60em) {
  .contact {
    gap: 0 var(--grid-12-gap);
    grid-template-columns: calc(2 * var(--grid-6-column) + 1 * var(--grid-6-gap)) calc(4 * var(--grid-6-column) + 3 * var(--grid-6-gap));
  }
}
*/