/**
 * Image Grid Layout
 * 
 */

/* Grid container setup */
.ct-content--image-grid .container > div > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.ct-content--image-grid .container > div > div h1,
.ct-content--image-grid .container > div > div h2,
.ct-content--image-grid .container > div > div h3,
.ct-content--image-grid .container > div > div h4,
.ct-content--image-grid .container > div > div h5,
.ct-content--image-grid .container > div > div h6 {
  grid-column: 1 / -1;
}

/* hide paragraphs so they dont break the grid layout */
/* Text paragraphs also span full width */
.ct-content--image-grid .container > div > div p {
  display: none;
  grid-column: 1 / -1;
}

.ct-content--image-grid img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: contain;
  align-self: center;
}

@media (max-width: 768px) {
  .ct-content--image-grid .container > div > div {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ct-content--image-grid .container > div > div {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1025px) {
  .ct-content--image-grid .container > div > div {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}