.sectionGridWithIcons {
}

.sectionGridWithIcons__header,
.sectionGridWithIcons__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4.8rem 2rem;
}

.sectionGridWithIcons h3,
.sectionGridWithIcons .heading-3 {
  margin: 0;
}

.sectionGridWithIcons__header {
  border-bottom: 1px solid var(--color-blue);
}

.sectionGridWithIcons__column:not(:last-of-type) {
  border-bottom: 1px solid var(--color-blue);
}

.sectionGridWithIcons__column .heading-4.sectionGridWithIcons__column__pre-title {
  margin-bottom: 2.4rem;
}

.sectionGridWithIcons__column figure {
  width: 100%;
  max-width: 30rem;
  margin-bottom: 3.2rem;
  aspect-ratio: 3 / 2;
}

.sectionGridWithIcons__column figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 0 50%;
}

.sectionGridWithIcons__column .heading-4 {
  margin: 0;
}

.sectionGridWithIcons__column .modal-trigger,
.sectionGridWithIcons__column .sectionGridWithIcons__column__cta {
  margin-top: 4rem;
}

.sectionGridWithIcons__modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0, 0.5);
  z-index: 9999;
  padding: 2rem;
}

.sectionGridWithIcons__modal.is-open {
  display: flex;
}

.sectionGridWithIcons__modal-content {
  width: 100%;
  max-width: 124rem;
  margin: 0 auto;
  background: var(--color-beige-light);
  padding: 6.4rem 2.4rem 4.8rem;
  position: relative;
}

.sectionGridWithIcons__modal__close {
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
  cursor: pointer;
}

.sectionGridWithIcons__modal__close * {
  pointer-events: none;
}

.sectionGridWithIcons__modal-content .heading-2 {
  color: var(--color-blue) !important;
  max-width: 64rem;
}

.sectionGridWithIcons__modal__list {
  display: grid;
  gap: 1.6rem;
  padding: 0;
  list-style: none;
}

.sectionGridWithIcons__modal__list li {
  padding-left: 4.8rem;
  position: relative;
  color: var(--color-gray) !important;
}

.sectionGridWithIcons__modal__list li:before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 0.1rem;
  position: absolute;
  top: 40%;
  left: 0;
  background-color: var(--color-gray);
}


@media screen and (min-width: 940px) {
  .sectionGridWithIcons__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sectionGridWithIcons__column:nth-of-type(odd) {
    border-right: 1px solid var(--color-blue);
  }

  .sectionGridWithIcons__column:nth-last-of-type(2) {
    border-bottom: none;
  }

  .sectionGridWithIcons__modal-content {
    padding: 6.4rem 5.6rem 8rem;
  }

  .sectionGridWithIcons__modal__close {
    top: 4rem;
    right: 4rem;
  }

  .sectionGridWithIcons__modal-content .heading-2 {
    margin-bottom: 6.4rem;
  }

  .sectionGridWithIcons__modal__list {
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
  }
}

@media screen and (min-width: 1200px) {
  .sectionGridWithIcons__header,
  .sectionGridWithIcons__column {
    padding: 5.6rem;
  }

  .sectionGridWithIcons__modal-content {
    padding: 10rem 8.8rem 12rem;
  }
  .sectionGridWithIcons__modal-content .heading-2 {
    margin-bottom: 9.2rem;
  }
}

@media screen and (min-width: 1321px) {
  .sectionGridWithIcons__header,
  .sectionGridWithIcons__column {
    padding: 8.8rem;
  }
}