.paragraph--type--image-collage {
  margin: 2rem auto;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
          "topleft topleft topright"
          "bottomleft bottomright bottomright";
  max-width: 100%;

  @media screen and (max-width: 975px) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
          "topleft topright"
          "bottomleft bottomright";
  }

  @media screen and (max-width: 600px) {
    display: flex;
    flex-flow: column wrap;
  }


}

.paragraph--type--image-collage img {
  max-width: 100%;
  height: auto;
}

.paragraph--type--image-collage .field--name-field-collage-rectangle-1 {
  grid-area: top;
}

.paragraph--type--image-collage :is(
.field--name-field-collage-rectangle-1,
.field--name-field-collage-square-1,
.field--name-field-collage-square-2,
.field--name-field-collage-rectangle-2 ) .field__item > div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 500px;


  @media screen and (max-width: 108rem) {
    min-height: 400px;
  }
  @media screen and (max-width: 70rem) {
    min-height: 250px;
  }

}


.paragraph--type--image-collage .field--name-field-collage-square-1 {
  grid-area: mid1;
}

.paragraph--type--image-collage .field--name-field-collage-square-2 {
  grid-area: mid2;
}

.paragraph--type--image-collage .field--name-field-collage-rectangle-2 {
  grid-area: bottom;
  /* margin-top: -7px; */
}


.paragraph--type--image-collage .field--name-field-collage-rectangle-1 {
  grid-area: topleft;
}

.paragraph--type--image-collage .field--name-field-collage-square-1 {
  grid-area: topright;
}

.paragraph--type--image-collage .field--name-field-collage-rectangle-2 {
  grid-area: bottomright;
}

.paragraph--type--image-collage .field--name-field-collage-square-2 {
  grid-area: bottomleft;
}