collage.css

.image_grid_section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto;
  grid-gap: 1rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

.image_grid_container {
  overflow-x: hidden;
  display: grid;
  place-items: center;
  margin: 0.75rem;
  padding: 0.75rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background: #e2e2e2;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.image_grid {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 2px solid #efefef;
  background: #fff url("./Images/stars.svg") center/cover;
}

.image_grid_2 {
  background: #fff url("./Images/star.svg") center/cover;
}

.image_grid_3,
.image_grid_4 {
  background: #fff url("./Images/leaf.svg") center/cover;
}

.image_grid_5,
.image_grid_6 {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: #fff url("./Images/dog.svg") center/cover;
}

.image_grid_7 {
  background: #fff url("./Images/grass.svg") center/cover;
}

.image_grid img {
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
  border: 2px solid #efefef;
}

.images_count,
.select_collage_btn {
  background: #ffc107;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.images_count {
  background: #e2e2e2;
}

/* image_grid_1 */
.image_grid_1 img:nth-child(1) {
  grid-column: 1/3;
  grid-row: 1/2;
  border: 2px solid #efefef;
}

.image_grid_1 img:nth-child(2) {
  grid-column: 3/4;
  grid-row: 1/2;
  border: 2px solid #efefef;
}

.image_grid_1 img:nth-child(3) {
  border: 2px solid #efefef;
}

.image_grid_1 img:nth-child(4) {
  grid-column: 2/4;
  grid-row: 2/3;
  border: 2px solid #efefef;
}
/* end of image_grid_1 */

/* image_grid_2 */
.image_grid_2 img:nth-child(1) {
  grid-column: 1/4;
  grid-row: 1/2;
  border: 2px solid #efefef;
}

.image_grid_2 img:nth-child(2) {
  grid-column: 1/2;
  border: 2px solid #efefef;
}

.image_grid_2 img:nth-child(3) {
  grid-column: 2/3;
  grid-row: 2/3;
  border: 2px solid #efefef;
}

.image_grid_2 img:nth-child(4) {
  border: 2px solid #efefef;
}
/* end of image_grid_2 */

/* image_grid_3 */
.image_grid_3 img:nth-child(1) {
  grid-column: 1/3;
  grid-row: 1/2;
  border: 2px solid #efefef;
}

.image_grid_3 img:nth-child(2) {
  grid-column: 3/4;
  grid-row: 1/2;
  border: 2px solid #efefef;
}

.image_grid_3 img:nth-child(3) {
  grid-column: 1/3;
  grid-row: 2/3;
  border: 2px solid #efefef;
}

.image_grid_3 img:nth-child(4) {
  border: 2px solid #efefef;
}
/* end of image_grid_3 */

/* image_grid_4 */
.image_grid_4 img:nth-child(1) {
  grid-column: 1/2;
  grid-row: 1/2;
  border: 2px solid #efefef;
}

.image_grid_4 img:nth-child(2) {
  grid-column: 2/3;
  grid-row: 1/2;
  border: 2px solid #efefef;
}

.image_grid_4 img:nth-child(3) {
  grid-column: 3/4;
  grid-row: 1/2;
  border: 2px solid #efefef;
}

.image_grid_4 img:nth-child(4) {
  grid-column: 1/4;
  grid-row: 2/3;
  border: 2px solid #efefef;
}
/* end of image_grid_4 */

/* image_grid_5 */
.image_grid_5 img:nth-child(1) {
  grid-column: 1/3;
  grid-row: 1/3;
  border: 2px solid #efefef;
}

.image_grid_5 img:nth-child(2) {
  grid-column: 3/5;
  grid-row: 1/3;
  border: 2px solid #efefef;
}

.image_grid_5 img:nth-child(3) {
  grid-column: 5/7;
  grid-row: 1/3;
  border: 2px solid #efefef;
}

.image_grid_5 img:nth-child(4) {
  grid-column: 1/4;
  grid-row: 3/4;
  border: 2px solid #efefef;
}

.image_grid_5 img:nth-child(5) {
  grid-column: 4/7;
  grid-row: 3/4;
  border: 2px solid #efefef;
}
/* end of image_grid_5 */

/* image_grid_6 */
.image_grid_6 img:nth-child(1) {
  grid-column: 1/3;
  grid-row: 1/3;
  border: 2px solid #efefef;
}

.image_grid_6 img:nth-child(2) {
  grid-column: 3/5;
  grid-row: 1/2;
  border: 2px solid #efefef;
}

.image_grid_6 img:nth-child(3) {
  grid-column: 5/7;
  grid-row: 1/3;
  border: 2px solid #efefef;
}

.image_grid_6 img:nth-child(4) {
  grid-column: 1/4;
  grid-row: 3/4;
  border: 2px solid #efefef;
}

.image_grid_6 img:nth-child(5) {
  grid-column: 3/5;
  grid-row: 2/4;
  border: 2px solid #efefef;
}

.image_grid_6 img:nth-child(6) {
  grid-column: 5/7;
  grid-row: 3/4;
  border: 2px solid #efefef;
}
/* end of image_grid_6 */

.image_grid_7 img:nth-child(8) {
  grid-column: 2/4;
  grid-row: 3/4;
  border: 2px solid #efefef;
}

.popup_selected_collage {
  position: fixed;
  top: 8%;
  left: 0;
  width: 100%;
  height: 93vh;
  overflow-y: auto;
  z-index: 1001;
  background: url("./Images/mediacraft_logo_watermark.png") center/contain;
  padding: 1rem;
}

.drag_and_drop_div {
  display: grid;
  margin: 2rem auto !important;
  background: #fff;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  border: 2px solid #c5b8b8;
}

.popup_selected_collage .image_grid {
  width: 100%;
  max-width: 400px;
  margin-top: 2rem;
}

.close_btn {
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 0.5rem;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .popup_selected_collage .image_grid {
    width: 100%;
  }
}