.c-knowledge-grid {
  border-top: 1px solid #cbd0d9;
  padding: 0;
  width: 100%;
  font-family: var(--font-family, "Lato", sans-serif);
}

.c-knowledge-grid__title {
  color: #012c52;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  text-align: center;
  margin-top: 0;
  margin-bottom: 40px;
}

.c-knowledge-grid__container {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  padding: 0 15px;
  width: 100%;
}

.c-knowledge-grid__cards {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 40px);
  margin: -20px;
  padding-top: 98px; /* 60px space + 38px icon overlap offset */
  box-sizing: border-box;

  @media (max-width: 1080px) {
    padding-top: 70px;
  }
}

.c-knowledge-grid__card {
  position: relative;
  width: calc(100% - 40px);
  text-align: center;
  transition: all 0.3s;
  border: 1px solid #cbd0d9;
  margin: 20px;
  background-color: #fff;
  border-radius: 6px;
  padding: 60px 20px 15px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.c-knowledge-grid__card:hover {
  box-shadow: 0px 6px 10px #c4c4c3bf;
  border-color: #fff;
}

.c-knowledge-grid__card-icon-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -38px;
}

/* Color Themes — hex values (legacy) and named values */

.c-knowledge-grid__card.is-f4cdd4 .c-knowledge-grid__card-icon-wrapper,
.c-knowledge-grid__card.is-pink .c-knowledge-grid__card-icon-wrapper {
  background-color: #f4cdd4;
  color: #d13a7a;
}

.c-knowledge-grid__card.is-b896d4 .c-knowledge-grid__card-icon-wrapper,
.c-knowledge-grid__card.is-purple .c-knowledge-grid__card-icon-wrapper {
  background-color: #b896d4;
  color: #8956c2;
}

.c-knowledge-grid__card.is-76d3ff .c-knowledge-grid__card-icon-wrapper,
.c-knowledge-grid__card.is-_6d3ff .c-knowledge-grid__card-icon-wrapper,
.c-knowledge-grid__card.is-blue .c-knowledge-grid__card-icon-wrapper {
  background-color: #76d3ff;
  color: #009ce3;
}

.c-knowledge-grid__card.is-addfb3 .c-knowledge-grid__card-icon-wrapper,
.c-knowledge-grid__card.is-green .c-knowledge-grid__card-icon-wrapper {
  background-color: #addfb3;
  color: #00a859;
}

.c-knowledge-grid__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.c-knowledge-grid__card-icon .a-image,
.c-knowledge-grid__card-icon img,
.c-knowledge-grid__card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Ensure SVG strokes/fills inherit color */
.c-knowledge-grid__card-icon svg {
  fill: currentColor;
}
.c-knowledge-grid__card-icon svg path {
  fill: currentColor;
}

.c-knowledge-grid__card-title {
  color: #001829;
  font-size: 26px;
  line-height: 32px;
  font-family: var(--font-family-mmc-bold);
  margin: 0 0 10px;
}

.c-knowledge-grid__card-desc {
  color: #727b83;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}

.c-knowledge-grid__illustration {
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-knowledge-grid__illustration .a-image {
  width: 100%;
}

.c-knowledge-grid__illustration img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive Breakpoints */
@media (min-width: 576px) {
  .c-knowledge-grid__cards {
    margin: -50px -20px;
    width: calc(100% + 40px);
  }
  .c-knowledge-grid__card {
    width: calc(50% - 40px);
    margin: 50px 20px;
    min-height: 220px;
  }
}

@media (max-width: 991.98px) {
  .c-knowledge-grid__illustration {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .c-knowledge-grid__container {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    align-items: stretch;
  }

  .c-knowledge-grid__cards {
    flex: 1.2;
    max-width: 720px;
    width: 100%;
  }

  .c-knowledge-grid__illustration {
    flex: 0.8;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .c-knowledge-grid__illustration .a-image {
    height: 100%;
    display: flex;
    align-items: stretch;
  }

  .c-knowledge-grid__illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
  }
}