.blurb_grid_module{
    position: relative;
}
.blurb-grid-section{
  padding: 0;
  position: relative;
}

.blurb-grid-wrap{
    margin: 0 auto;
    width: 70%;
    max-width: 1080px;
}

.blurb-grid-title{
  text-align: center;
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 50px;
  color: var(--heading-color);
  font-weight: 700;
}

.blurb-grid-grid{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.blurb-grid-grid.mobile-grid{
    display: none;
}

/* Row */
.blurb-grid-row{
  --gap: 28px;
  --cols: var(--cols-desktop, 3);

  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* this is what centers when fewer items */
  gap: var(--gap);
}

/* Box base */
.blurb-grid-box{
  background: transparent;
  border-radius: 28px;
  padding: 40px 34px;
  text-align: center;
  border: 3px solid transparent;

  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;

  /* width math driven by cols + span */
  flex: 0 0 calc(
    (
      (100% - ( (var(--cols) - 1) * var(--gap) )) / var(--cols)
    ) * var(--span, 1)
    + ( (var(--span, 1) - 1) * var(--gap) )
  );
  max-width: calc(
    (
      (100% - ( (var(--cols) - 1) * var(--gap) )) / var(--cols)
    ) * var(--span, 1)
    + ( (var(--span, 1) - 1) * var(--gap) )
  );
}

.blurb-grid-box.no-content-blurb{
  display: flex;
  align-items: center;
  justify-content: center;
}
.blurb-grid-box:not(.transparent-blurb){
  background: #eef6fb;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}
.blurb-grid-box:not(.transparent-blurb):hover{
  border-color: #0b7bd3;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

.blurb-grid-box.is-full{
  flex-basis: 100%;
  max-width: 100%;
}

.blurb-grid-icon{
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.blurb-grid-icon img{
  display:block;
  height: var(--img-h, 55px);
  width: auto;
  max-width: none; /* we will handle the switch via JS */
}

/* your sizes via CSS variable */
.blurb-grid-icon.image-small { --img-h:55px; }
.blurb-grid-icon.image-medium{ --img-h:90px; }
.blurb-grid-icon.image-large { --img-h:150px; }

/* the switched state */
.blurb-grid-icon img.is-fit-width{
  width: 100%;
  height: auto;
}

.blurb-grid-box-title{
  margin: 0 0 18px;
  font-size: 28px;
  line-height: 1.15;
  color: #0a2a55;
  font-weight: 800;
}

.blurb-grid-box-content{
  font-size: 18px;
  line-height: 1.6;
  color: #0a2a55;
}

.blurb-grid-box-content p{
  margin: 0 0 10px;
}

.blurb-grid-box-content a{
  color: #0a2a55;
  text-decoration: underline;
  font-weight: 700;
}

.blurb-grid-box.is-clickable{
  cursor: pointer;
}
.blurb-grid-box.is-clickable a{
  cursor: pointer; /* keep normal link cursor on real links */
}
@media (max-width: 1366px){
    .blurb-grid-wrap {
        width: 75%;
    }
}
@media (max-width: 1100px){
    .blurb-grid-wrap {
        width: 85%;
    }
    .blurb-grid-box-title {
        font-size: 24px;
    }
}
/* Tablet */
@media (max-width: 900px){
  .blurb-grid-title{ font-size: 36px; }
  .blurb-grid-row{ --cols: 2; }
    .blurb-grid-grid.mobile-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center; /* this is what centers when fewer items */
    gap: 20px;
  }
  .blurb-grid-grid.mobile-grid .blurb-grid-box{
    max-width: 100%;
  }
  .blurb-grid-grid:not(.mobile-grid){
    display: none;
  }
  
}
@media (max-width: 640px){
    .blurb-grid-grid.mobile-grid{
        grid-template-columns: 1fr;
    }
}
/* Mobile */
/* @media (max-width: 600px){
  .blurb-grid-title{ font-size: 30px; }
  .blurb-grid-row{ --cols: 1; }
  .blurb-grid-box{
    flex-basis: 100%;
    max-width: 100%;
    padding: 34px 26px;
  }

} */