/* =====================================================
   THREE COLUMN CONTENT (BASE)
   ===================================================== */

.three-column-content {
  width: 100%;
  padding: 56px 0;
}

/* Inner container */
.three-column-content__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Grid wrapper */
.three-column-content__grid {
  display: grid;
  gap: 64px;
  align-items: start;
}

/* Column count modifiers */
.three-column-content__grid--1 {
  grid-template-columns: 1fr;
}

.three-column-content__grid--2 {
  grid-template-columns: 1fr 1fr;
}

.three-column-content__grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Individual column */
.three-column-content__col {
  display: flex;
  flex-direction: column;
}

/* Headings */
.three-column-content__heading {
  margin: 0 0 14px;
  font-weight: 900;
  line-height: 1.2;
  color: #000;
}

/* WYSIWYG content */


.three-column-content__content p {
  margin: 0 0 14px;
}

.three-column-content__content p:last-child {
  margin-bottom: 0;
}

.three-column-content__content strong {
  font-weight: 900;
}

.three-column-content__content a {
  font-weight: 900;
  text-decoration: underline !important;
  color: inherit;
  color:#fff !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1100px) {
  .three-column-content__inner {
    padding: 0 24px;
  }

  .three-column-content__grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
}

/* =====================================================
   TEAL BACKGROUND VARIANT
   Apply via className:
   three-column-content--teal
   ===================================================== */

.three-column-content--teal {
  color: #fff;

  background-image: url("/wp-content/themes/skinbonescme/assets/images/Blue.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  padding: 56px 0;
}

.three-column-content--teal .three-column-content__heading,
.three-column-content--teal .three-column-content__content {
  color: rgba(255, 255, 255, 0.98);
}

.three-column-content--teal .three-column-content__content a {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
}
