.mosaic--4 .mosaic__item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
  padding-bottom: calc(100% - 4px);
}
.mosaic--4 .mosaic__item:nth-child(2) {
  grid-area: 2 / 1 / 3 / 2;
  padding-bottom: calc(100% - 4px);
}
.mosaic--4 .mosaic__item:nth-child(3) {
  grid-area: 1 / 2 / 3 / 3;
  padding-bottom: 200%;
}
.mosaic--4 .mosaic__item:nth-child(4) {
  grid-area: 1 / 3 / 3 / 4;
  padding-bottom: 200%;
}
.mosaic--4 .mosaic__item:nth-child(5) {
  grid-area: 1 / 4 / 2 / 5;
  padding-bottom: calc(100% - 4px);
}
.mosaic--4 .mosaic__item:nth-child(6) {
  grid-area: 2 / 4 / 3 / 5;
  padding-bottom: calc(100% - 4px);
}
@media (max-width: 768px) {
  .mosaic--4 .mosaic__item:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
  }
  .mosaic--4 .mosaic__item:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
  }
  .mosaic--4 .mosaic__item:nth-child(3) {
    grid-area: 2 / 1 / 4 / 2;
  }
  .mosaic--4 .mosaic__item:nth-child(4) {
    grid-area: 2 / 2 / 4 / 3;
  }
  .mosaic--4 .mosaic__item:nth-child(5) {
    grid-area: 4 / 1 / 5 / 2;
  }
  .mosaic--4 .mosaic__item:nth-child(6) {
    grid-area: 4 / 2 / 5 / 3;
  }
}
