/* grid-box.css */
.paragraph-type-grid-box {
  position: relative;
  margin-bottom: 7.5rem;
}
.grid-box__container {
  position: inherit;
  display: grid;
  row-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 120px 100%;
  background: #f1f2f3;
  padding-left: 2.5rem;
  padding-bottom: 4rem;
}
.grid-box__heading {
  grid-row: 1;
  grid-column: 1/4;
}
.grid-box__heading--alt {
  grid-row: 2;
  grid-column: 1/2;
}
.grid-box__item {
  position: relative;
  grid-row: 2; /* keeps all items on the first row */
}
.grid-box__item .card__title {
  position: relative;
}
@media (max-width: 768px) {
  .grid-box__container {
    display: none;
  }
  .grid-box__carousel {
    background-color: #f1f2f3;
    padding-left: 2.5rem;
    padding-bottom: 2rem;
    width: 100vw;
  }
  .grid-box__carousel_title {
    padding-top: 1rem;
  }
  /* Ensure cards in carousel maintain consistent width, especially with vector images */
  .grid-box__carousel .Carousel__itemlist .grid-box__item {
    min-width: 15.75rem;
    flex-shrink: 0;
  }
  .grid-box__carousel .Carousel__itemlist .grid-box__item .card__content {
    min-width: 15.75rem;
    width: 15.75rem;
  }
  /* Ensure vector images (SVG) don't shrink the card */
  .grid-box__carousel .Carousel__itemlist .grid-box__item .card__image svg,
  .grid-box__carousel .Carousel__itemlist .grid-box__item .card__image img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}
@media (min-width: 768px) {
  .grid-box__carousel {
    display: none;
  }
}