.mosaic {
  max-width: var(--layout-width);
  padding: 0 var(--sidegap);
  margin: var(--L) auto;
  box-sizing: border-box;
}

.mosaic__title {
  font: var(--giant);
}

.mosaic__piece__title {
  font: var(--huge);
  margin-block: 0 0.5em;
}

.mosaic__pieces {
  display: grid;
  grid-template-columns: 1fr;
  @media (min-width: 1200px) {
    grid-template-columns: repeat(2, 1fr);
  }
  grid-gap: 32px;
  :is(h3) {
    font: var(--huge);
  }
}

.mosaic__piece:not(.mosaic__piece--type_image) {
  padding: var(--S);
  background: #f1f3f4;
  border-radius: 6px;
}

.mosaic__piece--type_image img {
  vertical-align: bottom;
  width: 100%;
  border-radius: 6px;
}