.collage-grid .fluid {
  padding-bottom: 0 !important;
  height: 100%;
}

.suffle-button {
  gap: 5px !important;
}

.suffle-button svg {
  margin-left: 5px;
}

.collage-block .block-intro {

  max-width: 980px;


}

.wp-block-button .wp-block-button__link.suffle-button {

  padding-left: 12px;
  padding-right: 12px;
}

.collage-grid img {
  position: static;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.collage-grid .wp-block-buttons {
  grid-column: 4;
  grid-row: 1 / span 1;
  height: 40px;
}

.collage-grid {
  display: grid;
  grid-template-columns: 18% 24% 30% 24%;
  grid-auto-rows: 42px;
  /* baseline row height */
  gap: 16px;
  margin-top: 32px;
}

.item1 {
  grid-column: 1;
  grid-row: 3 / span 6;
}

/* rows 3–8 */
.item2 {
  grid-column: 2;
  grid-row: 2 / span 4;
}

/* rows 2–5 */
.item3 {
  grid-column: 2;
  grid-row: 6 / span 4;
}

/* rows 6–9 */
.item4 {
  grid-column: 3;
  grid-row: 1 / span 8;
}

/* rows 1–8 */
.item5 {
  grid-column: 4;
  grid-row: 2 / span 6;
}

/* rows 2–6 */
.item6 {
  grid-column: 4;
  grid-row: 8 / span 3;
}

/* Desktop fade rules */
.collage-grid .item {
  transition: opacity 0.35s ease-in-out;
  opacity: 1;
}

.collage-grid .item.fading-out {
  opacity: 0;
}

.collage-grid .item.fading-in {
  opacity: 1;
}

.collage-grid .item {
  transition: opacity 0.35s ease-in-out;
  opacity: 1;
}

.collage-grid .fluid {
  position: relative;
  height: 100%;
}

.collage-grid .fluid>* {
  width: 100%;
  height: 100%;
}

.collage-grid .fluid img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* rows 7–9 */

@media (min-width: 1500px) {
  .collage-grid {

    grid-auto-rows: 60px;
  }
}

@media (max-width: 850px) {
  .collage-grid {
    gap: 8px;

    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 60px;
  }

  .item1 {
    grid-column: 1;
    grid-row: 2 / span 3;
  }

  .item2 {
    grid-column: 1;
    grid-row: 5 / span 2;
  }

  .item3 {
    grid-column: 2;
    grid-row: 4 / span 4;
  }

  .item4 {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .item5 {
    grid-column: 3;
    grid-row: 2 / span 4;
  }

  .item6 {
    grid-column: 3;
    grid-row: 6 / span 3;
  }

  .collage-grid .wp-block-buttons {
    grid-column: 3;
    grid-row: 1 / span 1;
  }
}

.collage-grid .item.fading-out {
  opacity: 0;
}

.collage-grid .item.fading-in {
  opacity: 1;
}

.collage-overlay {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  pointer-events: none;
}

.collage-overlay.visible {
  opacity: 1;
}

/*.underlay-fade {
      opacity: 0 !important;
      transition: opacity 0.35s ease-in-out;
    }*/




@media (max-width: 550px) {
  .ex-im {
    display: none;
  }

  .collage-grid {
    grid-auto-rows: 40px;
  }








}

@media(max-width:373px) {

  .suffle-button svg {
    display: none;
  }
}