#{{ section.id }} .section-collage {
  display: flex;
  gap: 80px;
  align-items: center;
}

#{{ section.id }} .section-collage--reverse {
  flex-direction: row-reverse;
}

#{{ section.id }} .collage__content {
  flex: auto;
  width: 40%;
}

#{{ section.id }} .collage__content h2 {
  margin-bottom: 0.5rem;
}

 #{{ section.id }} .collage__content .rte {
 padding: 10px 0px;
} 

#{{ section.id }} .collage__content .btn {
  font-size: calc(var(--font-button-scale) * 1.125rem);
}

#{{ section.id }} .image-collage-wrap {
  width: 100%;
  max-width: 60%;
  position: relative;
}

#{{ section.id }} .image-collage-wrap:after {
  content: "";
  display: block;
  padding-bottom: 50%;
}

#{{ section.id }} .image-collage-wrap--2 {
  margin: 21px 0 46px;
}

#{{ section.id }} .image-collage-wrap--2:after {
  padding-bottom: 60%;
}

#{{ section.id }} .image-collage-wrap--3:after {
  padding-bottom: 83%;
}

#{{ section.id }} .image-collage-wrap--4:after {
  padding-bottom: 100%;
}

#{{ section.id }} .image-collage {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: auto;
  display: grid;
}

#{{ section.id }} .image-collage-wrap--2 .image-collage {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

#{{ section.id }} .image-collage-wrap--3 .image-collage {
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(9, 1fr);
}

#{{ section.id }} .image-collage-wrap--4 .image-collage {
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

#{{ section.id }} .item {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	object-fit: cover;
}

#{{ section.id }} .image-collage-wrap--2 .item1 {
  grid-column: 1/5;
  grid-row: 1/5;
  transform: rotate(-8deg);
}

#{{ section.id }} .image-collage-wrap--2 .item2 {
  grid-column: 5/9;
  grid-row: 1/5;
  transform: rotate(10deg);
  transform: rotate(6deg) translateY(30px);
}

#{{ section.id }} .image-collage-wrap--3 .item1 {
  grid-column: 1/6;
  grid-row: 1/7;
  /* transform: rotate(-10deg); */
}

#{{ section.id }} .image-collage-wrap--3 .item2 {
  grid-column: 7/12;
  grid-row: 1/7;
  margin-top: 14px;
  /* transform: translateY(14px); */
  /* transform: rotate(3deg); */
}

#{{ section.id }} .image-collage-wrap--3 .item3 {
  grid-column: 4/10;
  grid-row: 3/10;
}

#{{ section.id }} .image-collage-wrap--4 .item1 {
  grid-column: 1/5;
  grid-row: 2/7;
}

#{{ section.id }} .image-collage-wrap--4 .item2 {
  grid-column: 7/11;
  grid-row: 1/6;
}

#{{ section.id }} .image-collage-wrap--4 .item3 {
  grid-column: 7/12;
  grid-row: 7/11;
}

#{{ section.id }} .image-collage-wrap--4 .item4 {
  grid-column: 4/9;
  grid-row: 3/9;
}

#{{ section.id }} .image-collage__img {
  border-radius: 10px;
  box-shadow: 0 1px 3px #00000080;
  overflow: hidden;
  background: rgb(var(--color-background));
  z-index: 1;
}

#{{ section.id }} .image-collage__img a {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: transform 0.6s ease-in-out;
}

#{{ section.id }} .image-collage__img a:hover {
  transform: scale(1.1);
}

#{{ section.id }} .image-collage__img.scene-parallax {
  position: relative;
  will-change: transform;
  transform: translateY(var(--translateY));
}

#{{ section.id }} .image-collage__img .media {
  height: 100%;
}
.media.media--transparent img {
    border-radius: 10px;
      width: 100%;
    object-fit: cover;
    height: 100%;
}

@media screen and (max-width: 1024px) {
#{{ section.id }} .section-collage {
    flex-direction: column;
    gap: 30px;
  }

#{{ section.id }} .collage__content {
    text-align: center;
    width: auto;
  }

 #{{ section.id }} .image-collage-wrap {
    max-width: 560px;
  }
}

@media screen and (max-width: 768px) {
 #{{ section.id }} .section-collage {
    gap: 26px;
  }

 /* #{{ section.id }} .collage__content .rte {
    font-size: calc(0.9375rem * var(--font-section-scale, 1));
  } */

 #{{ section.id }} .collage__content .btn {
    font-size: calc(var(--font-button-scale) * 1rem);
  }

 #{{ section.id }} .image-collage-wrap {
    max-width: none;
  }

 #{{ section.id }} .image-collage__img {
    border-radius: calc(8px * var(--border-radius));;
  }
}