.workshop-summary {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 24px;
  grid-template-areas: "heading" "image" "content";
  margin-bottom: 40px;
}

@media screen and (min-width: 600px) {
  .workshop-summary {
    grid-template-columns: 300px 1fr;
    grid-template-areas: "heading heading" "image content";
  }
}

.workshop-summary__heading {
  grid-area: heading;
}

.workshop-summary__image {
  grid-area: image;
}

@media screen and (max-width: 599px) {
  .workshop-summary__image {
    margin-bottom: 24px;
  }
}

.workshop-summary__content {
  grid-area: content;
}