.collage {
    display: flex;
    align-content: flex-start;
    margin: 10px;
    flex-direction: row;
	 align-items: center;
	 gap:100px;
	 align-items: stretch;
	  padding-top:var(--spacer-padding);	 
  }


  .collage .textbox {
    flex: 1; /* 50% Breite */
  }
  .collage .images {
    flex: 1; /* 50% Breite */
	  position: relative;
	  height: auto;
  }

.collage .textbox p {
	padding-top:40px;
}
.collage .images .image1 {
    width: 40%;
    position: absolute;
    right: 0px;
    height: 45%;
    top: 0%;
	border-radius: var(--radius);
}


.collage .images .image2 {
    width: 60%;
    position: absolute;
    right: 40%;
    height: 40%;
    top: 18%;
    margin-right: 10px;
	border-radius: var(--radius);
}
.collage .images .image3 {
    width: 50%;
    position: absolute;
    right: 40%;
    height: 50%;
    top: 60%;
    margin-right: 10px;
    border-radius: var(--radius);
}

.collage .images .image4 {
    width: calc(40% + 20px);
    position: absolute;
    right: -20px;
    height: 50%;
    top: 45%;
    margin-top: 10px;
	border-radius: var(--radius);
}

.collage .images img {
    object-fit: cover;
	 object-position: center center;
    width: 100%;
    height: 100%;
	border-radius: var(--radius);
}

@media only screen and (max-width: 1440px) {
	
	.collage .images .image1 {
    width: 40%;
    position: absolute;
    right: 0px;
    height: 20%;
    top: 0%;
    border-radius: var(--radius);
}
.collage .images .image2 {
        width: 60%;
        position: absolute;
        right: 40%;
        height: 40%;
        top: -2%;
        margin-right: 10px;
        border-radius: var(--radius);
    }
	.collage .images .image3 {
    width: 50%;
    position: absolute;
    right: 40%;
    height: 30%;
    top: 39%;
    margin-right: 10px;
    border-radius: var(--radius);
}
	.collage .images .image4 {
    width: calc(40% + 20px);
    position: absolute;
    right: -20px;
    height: 30%;
    top: 20%;
    margin-top: 10px;
    border-radius: var(--radius);
}
	
}



@media only screen and (max-width: 767px) {
	 .collage {
    flex-direction: column-reverse;
		 padding-bottom: 50px;
		 padding-top: 50px;
  }
	.collage .images {
    flex:none;
    height: 300px !important;
}
	
	    .collage .images .image1 {
        width: 40%;
        position: absolute;
        right: 0px;
        height: 30%;
        top: 0%;
    }
	    .collage .images .image2 {
        width: 60%;
        position: absolute;
        right: 40%;
        height: 40%;
        top: 18%;
        margin-right: 10px;
    }
	    .collage .images .image3 {
        width: 50%;
        position: absolute;
        right: 40%;
        height: 60%;
        top: 60%;
        margin-right: 10px;
    }
	    .collage .images .image4 {
        width: calc(40% + 20px);
        position: absolute;
        right: -20px;
        height: 50%;
        top: 30%;
        margin-top: 10px;
    }
	
	
}