.image-grid-block .item-wrap {
	position: relative;
}
.image-grid-block .item-wrap a {
	position: relative;
	height: 100%;
	width: 100%;
	display: block;
	cursor: pointer;
}
.image-grid-block .item-wrap-inner {
	height: 100%;
	width: 100%;
}
.image-grid-block .item-wrap .image img {
height: 100%;
  width: 100%;
  object-fit: cover;
}
.image-grid-block .item-wrap:hover .image img {
  filter: blur(2px);
}
.image-grid-block .item-wrap.no-content:hover .image img {
  filter: initial;
}
.image-grid-block .item-wrap .image {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
}
.image-grid-block .item-wrap .image::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	background: rgba(39, 38, 38, 0.1);
	transition: all 0.2s ease-in-out;
}
.image-grid-block .item-wrap:hover .image::after {
opacity: 1;
}
.image-grid-block .item-wrap.no-content .image::after {
display: none;
}

.image-grid-block .content-wrap {
	z-index: 2;
	position: absolute;
	padding: 24px;
	pointer-events: none;
	display: flex;
	top: 0;
	width: 100%;
	height: 100%;
	flex-flow: column;
	justify-content: flex-end;
}
.image-grid-block .item-wrap:hover .content-wrap {
  pointer-events: all;
}
@keyframes gridfadeInUp {
  0% {
    opacity:0;
    bottom:-24px;
  }
  100% {
    opacity:1;
    bottom:0;
  }
}
.image-grid-block .content-wrap .case-study-service {
	position: relative;
	font-weight: 500;
	margin-bottom: 8px;
		opacity: 0;
}
.image-grid-block .content-wrap h3 {
	position: relative;
	margin-bottom: 10px;
	color: #fff;
	opacity: 0;
}
.image-grid-block .read-more-link {
	position: relative;
	font-weight: 500;
	opacity: 0;
}
.image-grid-block .item-wrap:hover .read-more-link.underline span::after {
  transition-delay: 0.3s;	
}
.image-grid-block .item-wrap:hover .case-study-service {
  animation: .4s forwards gridfadeInUp;
  animation-delay: 0.05s;	
}
.image-grid-block .item-wrap:hover .content-wrap h3 {
  animation: .4s forwards gridfadeInUp;
  animation-delay: 0.1s;
}
.image-grid-block .item-wrap:hover .read-more-link {
  animation: .4s forwards gridfadeInUp;
  animation-delay: 0.15s;
}

.image-grid-block .items-1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 12px;
grid-row-gap: 12px;
}
.image-grid-block .items-1 .item-wrap:nth-of-type(1) { grid-area: 1 / 1 / 2 / 2; }

.image-grid-block .items-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-template-rows: 1fr; <- not needed for a single row */
  gap: 12px;
}

/* Placement */
.image-grid-block .items-2 .item-wrap:nth-of-type(1) { grid-area: 1 / 1 / 2 / 2; }
.image-grid-block .items-2 .item-wrap:nth-of-type(2) { grid-area: 1 / 2 / 2 / 3; }

/* Aspect ratios */
.image-grid-block .items-2 .item-wrap:nth-of-type(1) .image { aspect-ratio: 1 / 1; }
.image-grid-block .items-2 .item-wrap:nth-of-type(2) .image { aspect-ratio: 1 / 1; }

@media all and (max-width: 768px) {
  .image-grid-block .items-2 {
    grid-template-columns: repeat(2, 1fr); /* still 2 columns */
    grid-template-rows: auto;
  }

  /* Block 1 → left half */
  .image-grid-block .items-2 .item-wrap:nth-of-type(1) {
    grid-area: 1 / 1 / 2 / 2;
  }

  /* Block 2 → right half */
  .image-grid-block .items-2 .item-wrap:nth-of-type(2) {
    grid-area: 1 / 2 / 2 / 3;
  }
}



.image-grid-block .items-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-template-rows: 1fr;  <- not needed for a single row */
  gap: 12px;
}

/* Placement: [1] col 1, [2] spans cols 2–3, [3] col 4 */
.image-grid-block .items-3 .item-wrap:nth-of-type(1) { grid-area: 1 / 1 / 2 / 2; }
.image-grid-block .items-3 .item-wrap:nth-of-type(2) { grid-area: 1 / 2 / 2 / 4; }
.image-grid-block .items-3 .item-wrap:nth-of-type(3) { grid-area: 1 / 4 / 2 / 5; }

/* Lock shapes on the container */
.image-grid-block .items-3 .item-wrap:nth-of-type(1) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-3 .item-wrap:nth-of-type(2) .image { aspect-ratio: 930 / 461; }
.image-grid-block .items-3 .item-wrap:nth-of-type(3) .image { aspect-ratio: 459 / 461; }

@media all and (max-width: 768px) {
  .image-grid-block .items-3 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: auto;
  }

  /* Block 2 → full width (on top) */
  .image-grid-block .items-3 .item-wrap:nth-of-type(2) {
    grid-area: 1 / 1 / 2 / 3;
  }

  /* Block 1 → left half */
  .image-grid-block .items-3 .item-wrap:nth-of-type(1) {
    grid-area: 2 / 1 / 3 / 2;
  }

  /* Block 3 → right half */
  .image-grid-block .items-3 .item-wrap:nth-of-type(3) {
    grid-area: 2 / 2 / 3 / 3;
  }
}



.image-grid-block .items-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-template-rows: repeat(4, 1fr); <- remove to avoid tall rows */
  gap: 12px;
}

/* Placement */
.image-grid-block .items-4 .item-wrap:nth-of-type(1) { grid-area: 1 / 1 / 5 / 3; } /* spans 4 rows, 2 cols */
.image-grid-block .items-4 .item-wrap:nth-of-type(2) { grid-area: 1 / 3 / 3 / 4; }
.image-grid-block .items-4 .item-wrap:nth-of-type(3) { grid-area: 1 / 4 / 3 / 5; }
.image-grid-block .items-4 .item-wrap:nth-of-type(4) { grid-area: 3 / 3 / 5 / 5; }

/* Fixed aspect ratios on the image container */
.image-grid-block .items-4 .item-wrap:nth-of-type(1) .image { aspect-ratio: 930 / 935; }
.image-grid-block .items-4 .item-wrap:nth-of-type(2) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-4 .item-wrap:nth-of-type(3) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-4 .item-wrap:nth-of-type(4) .image { aspect-ratio: 930 / 461; }

@media all and (max-width: 768px) {
  .image-grid-block .items-4 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: auto;
  }

  /* Block 1 → full width */
  .image-grid-block .items-4 .item-wrap:nth-of-type(1) {
    grid-area: 1 / 1 / 2 / 3;
  }

  /* Block 2 → left half */
  .image-grid-block .items-4 .item-wrap:nth-of-type(2) {
    grid-area: 2 / 1 / 3 / 2;
  }

  /* Block 3 → right half */
  .image-grid-block .items-4 .item-wrap:nth-of-type(3) {
    grid-area: 2 / 2 / 3 / 3;
  }

  /* Block 4 → full width */
  .image-grid-block .items-4 .item-wrap:nth-of-type(4) {
    grid-area: 3 / 1 / 4 / 3;
  }
}



.image-grid-block .items-5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-template-rows: repeat(2, 1fr); <-- removed for auto height */
  gap: 12px;
}

/* Placement */
.image-grid-block .items-5 .item-wrap:nth-of-type(1) { grid-area: 1 / 1 / 3 / 3; }
.image-grid-block .items-5 .item-wrap:nth-of-type(2) { grid-area: 1 / 3 / 2 / 4; }
.image-grid-block .items-5 .item-wrap:nth-of-type(3) { grid-area: 1 / 4 / 2 / 5; }
.image-grid-block .items-5 .item-wrap:nth-of-type(4) { grid-area: 2 / 3 / 3 / 4; }
.image-grid-block .items-5 .item-wrap:nth-of-type(5) { grid-area: 2 / 4 / 3 / 5; }

/* Aspect ratios on container */
.image-grid-block .items-5 .item-wrap:nth-of-type(1) .image { aspect-ratio: 930 / 935; }
.image-grid-block .items-5 .item-wrap:nth-of-type(2) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-5 .item-wrap:nth-of-type(3) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-5 .item-wrap:nth-of-type(4) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-5 .item-wrap:nth-of-type(5) .image { aspect-ratio: 459 / 461; }

@media all and (max-width: 768px) {
  .image-grid-block .items-5 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: auto;
  }

  /* Block 1 → full width */
  .image-grid-block .items-5 .item-wrap:nth-of-type(1) {
    grid-area: 1 / 1 / 2 / 3;
  }

  /* Block 2 → left half */
  .image-grid-block .items-5 .item-wrap:nth-of-type(2) {
    grid-area: 2 / 1 / 3 / 2;
  }

  /* Block 3 → right half */
  .image-grid-block .items-5 .item-wrap:nth-of-type(3) {
    grid-area: 2 / 2 / 3 / 3;
  }

  /* Block 4 → left half */
  .image-grid-block .items-5 .item-wrap:nth-of-type(4) {
    grid-area: 3 / 1 / 4 / 2;
  }

  /* Block 5 → right half */
  .image-grid-block .items-5 .item-wrap:nth-of-type(5) {
    grid-area: 3 / 2 / 4 / 3;
  }
}


.image-grid-block .items-6 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-template-rows: repeat(3, 1fr);  <-- remove this */
  gap: 12px;
}

.image-grid-block .items-6 .item-wrap:nth-of-type(1) { grid-area: 1 / 1 / 3 / 3; }
.image-grid-block .items-6 .item-wrap:nth-of-type(2) { grid-area: 1 / 3 / 2 / 4; }
.image-grid-block .items-6 .item-wrap:nth-of-type(3) { grid-area: 1 / 4 / 2 / 5; }
.image-grid-block .items-6 .item-wrap:nth-of-type(4) { grid-area: 2 / 3 / 3 / 5; }
.image-grid-block .items-6 .item-wrap:nth-of-type(5) { grid-area: 3 / 1 / 4 / 3; }
.image-grid-block .items-6 .item-wrap:nth-of-type(6) { grid-area: 3 / 3 / 4 / 5; }

/* Apply your intended shapes to the box that holds the image */
.image-grid-block .items-6 .item-wrap:nth-of-type(1) .image { aspect-ratio: 930 / 935; }
.image-grid-block .items-6 .item-wrap:nth-of-type(2) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-6 .item-wrap:nth-of-type(3) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-6 .item-wrap:nth-of-type(4) .image { aspect-ratio: 930 / 461; }
.image-grid-block .items-6 .item-wrap:nth-of-type(5) .image { aspect-ratio: 1 / 1; }
.image-grid-block .items-6 .item-wrap:nth-of-type(6) .image { aspect-ratio: 1 / 1; }

@media all and (max-width: 768px) {
  .image-grid-block .items-6 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: auto;
  }

  /* Block 1 → full width */
  .image-grid-block .items-6 .item-wrap:nth-of-type(1) {
    grid-area: 1 / 1 / 2 / 3;
  }

  /* Block 2 → left half */
  .image-grid-block .items-6 .item-wrap:nth-of-type(2) {
    grid-area: 2 / 1 / 3 / 2;
  }

  /* Block 3 → right half */
  .image-grid-block .items-6 .item-wrap:nth-of-type(3) {
    grid-area: 2 / 2 / 3 / 3;
  }

  /* Block 4 → full width */
  .image-grid-block .items-6 .item-wrap:nth-of-type(4) {
    grid-area: 3 / 1 / 4 / 3;
  }

  /* Block 5 → left half */
  .image-grid-block .items-6 .item-wrap:nth-of-type(5) {
    grid-area: 4 / 1 / 5 / 2;
  }

  /* Block 6 → right half */
  .image-grid-block .items-6 .item-wrap:nth-of-type(6) {
    grid-area: 4 / 2 / 5 / 3;
  }
}



/* 7-up grid */
.image-grid-block .items-7 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-template-rows: repeat(3, 1fr);  <-- remove to avoid tall rows */
  gap: 12px;
}

/* Placement */
.image-grid-block .items-7 .item-wrap:nth-of-type(1) { grid-area: 1 / 1 / 3 / 3; }
.image-grid-block .items-7 .item-wrap:nth-of-type(2) { grid-area: 1 / 3 / 2 / 4; }
.image-grid-block .items-7 .item-wrap:nth-of-type(3) { grid-area: 1 / 4 / 2 / 5; }
.image-grid-block .items-7 .item-wrap:nth-of-type(4) { grid-area: 2 / 3 / 3 / 5; }
.image-grid-block .items-7 .item-wrap:nth-of-type(5) { grid-area: 3 / 1 / 4 / 2; }
.image-grid-block .items-7 .item-wrap:nth-of-type(6) { grid-area: 3 / 2 / 4 / 4; }
.image-grid-block .items-7 .item-wrap:nth-of-type(7) { grid-area: 3 / 4 / 4 / 5; }

/* Lock shapes (your ratios) on the container */
.image-grid-block .items-7 .item-wrap:nth-of-type(1) .image { aspect-ratio: 930 / 935; }
.image-grid-block .items-7 .item-wrap:nth-of-type(2) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-7 .item-wrap:nth-of-type(3) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-7 .item-wrap:nth-of-type(4) .image { aspect-ratio: 930 / 461; }
.image-grid-block .items-7 .item-wrap:nth-of-type(5) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-7 .item-wrap:nth-of-type(6) .image { aspect-ratio: 930 / 461; }
.image-grid-block .items-7 .item-wrap:nth-of-type(7) .image { aspect-ratio: 459 / 461; }

@media all and (max-width: 768px) {
  .image-grid-block .items-7 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: auto;
  }

  /* Block 1 → full width (spans both cols) */
  .image-grid-block .items-7 .item-wrap:nth-of-type(1) {
    grid-area: 1 / 1 / 2 / 3;
  }

  /* Block 2 → left half */
  .image-grid-block .items-7 .item-wrap:nth-of-type(2) {
    grid-area: 2 / 1 / 3 / 2;
  }

  /* Block 3 → right half */
  .image-grid-block .items-7 .item-wrap:nth-of-type(3) {
    grid-area: 2 / 2 / 3 / 3;
  }

  /* Block 4 → full width */
  .image-grid-block .items-7 .item-wrap:nth-of-type(4) {
    grid-area: 3 / 1 / 4 / 3;
  }

  /* Block 5 → left half */
  .image-grid-block .items-7 .item-wrap:nth-of-type(5) {
    grid-area: 4 / 1 / 5 / 2;
  }

  /* Block 7 → right half */
  .image-grid-block .items-7 .item-wrap:nth-of-type(7) {
    grid-area: 4 / 2 / 5 / 3;
  }

  /* Block 6 → full width */
  .image-grid-block .items-7 .item-wrap:nth-of-type(6) {
    grid-area: 5 / 1 / 6 / 3;
  }
}


.image-grid-block .items-8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-template-rows: repeat(4, 1fr); <-- removed for auto height */
  gap: 12px;
}

/* Placement */
.image-grid-block .items-8 .item-wrap:nth-of-type(1) { grid-area: 1 / 1 / 3 / 3; }
.image-grid-block .items-8 .item-wrap:nth-of-type(2) { grid-area: 1 / 3 / 2 / 4; }
.image-grid-block .items-8 .item-wrap:nth-of-type(3) { grid-area: 1 / 4 / 2 / 5; }
.image-grid-block .items-8 .item-wrap:nth-of-type(4) { grid-area: 2 / 3 / 3 / 5; }
.image-grid-block .items-8 .item-wrap:nth-of-type(5) { grid-area: 3 / 1 / 4 / 2; }
.image-grid-block .items-8 .item-wrap:nth-of-type(6) { grid-area: 3 / 2 / 4 / 3; }
.image-grid-block .items-8 .item-wrap:nth-of-type(7) { grid-area: 4 / 1 / 5 / 3; }
.image-grid-block .items-8 .item-wrap:nth-of-type(8) { grid-area: 3 / 3 / 5 / 5; }

/* Aspect ratios on container */
.image-grid-block .items-8 .item-wrap:nth-of-type(1) .image { aspect-ratio: 930 / 935; }
.image-grid-block .items-8 .item-wrap:nth-of-type(2) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-8 .item-wrap:nth-of-type(3) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-8 .item-wrap:nth-of-type(4) .image { aspect-ratio: 930 / 461; }
.image-grid-block .items-8 .item-wrap:nth-of-type(5) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-8 .item-wrap:nth-of-type(6) .image { aspect-ratio: 459 / 461; }
.image-grid-block .items-8 .item-wrap:nth-of-type(7) .image { aspect-ratio: 930 / 461; }
.image-grid-block .items-8 .item-wrap:nth-of-type(8) .image { aspect-ratio: 930 / 935; }

@media all and (max-width: 768px) {
  .image-grid-block .items-8 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: auto;
  }

  /* Block 1 → full width */
  .image-grid-block .items-8 .item-wrap:nth-of-type(1) {
    grid-area: 1 / 1 / 2 / 3;
  }

  /* Block 2 → left half */
  .image-grid-block .items-8 .item-wrap:nth-of-type(2) {
    grid-area: 2 / 1 / 3 / 2;
  }

  /* Block 3 → right half */
  .image-grid-block .items-8 .item-wrap:nth-of-type(3) {
    grid-area: 2 / 2 / 3 / 3;
  }

  /* Block 4 → full width */
  .image-grid-block .items-8 .item-wrap:nth-of-type(4) {
    grid-area: 3 / 1 / 4 / 3;
  }

  /* Block 5 → left half */
  .image-grid-block .items-8 .item-wrap:nth-of-type(5) {
    grid-area: 4 / 1 / 5 / 2;
  }

  /* Block 6 → right half */
  .image-grid-block .items-8 .item-wrap:nth-of-type(6) {
    grid-area: 4 / 2 / 5 / 3;
  }

  /* Block 7 → full width */
  .image-grid-block .items-8 .item-wrap:nth-of-type(7) {
    grid-area: 5 / 1 / 6 / 3;
  }

  /* Block 8 → full width */
  .image-grid-block .items-8 .item-wrap:nth-of-type(8) {
    grid-area: 6 / 1 / 7 / 3;
  }
}
