.section {
  @extend .row;
  margin: 0 (-$row-margin) $section-margin-bottom;
  padding: $section-horizontal-spacing-mobile - $row-margin;

  @include desktop {
    padding: $section-horizontal-spacing - $row-margin;
  }

  &--red,
  &--yellow,
  &--green,
  &--blue,
  &--purple,
  &--pink,
  &--charcoal {
    color: color("white");
    padding: $section-vertical-spacing-mobile ($section-horizontal-spacing-mobile - $row-margin);

    @include desktop {
      padding: $section-vertical-spacing ($section-horizontal-spacing - $row-margin);
    }
  }

  &--red {
    background: theme-color("red");
  }

  &--yellow {
    background: theme-color("yellow");
    color: theme-color("charcoal");
  }

  &--green {
    background: theme-color("green");
    color: theme-color("charcoal");
  }

  &--blue {
    background: theme-color("blue");
  }

  &--purple {
    background: theme-color("purple");
  }

  &--pink {
    background: theme-color("pink");
    color: theme-color("charcoal");
  }

  &--charcoal {
    background: theme-color("charcoal");
  }

  &__header {
    @extend .col-md-3;
  }

  &__header-header {
    border-top: 2px solid;
    margin-bottom: 24px;
    margin-top: 0;
    max-width: 200px;
    padding-top: 16px;

    @include tablet {
      width: 100%;
    }
  }

  &__title {
    @include font-size($font-heading-2-mobile);

    @include tablet {
      @include font-size($font-heading-2);
    }
  }

  &__header-text {
    @include font-size($font-lead);
    max-width: 250px;
  }

  &__body {
    @extend .col-md-6;

    &--full-width {
      @extend .col-md-9;
    }
  }

  &--image {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    padding: 0;

    .section__text,
    .section__image {
      @include tablet {
        flex: 0 0 50%;
        max-width: 50%;
      }
    }

    &__title {
      margin-bottom: 32px;
    }

    .section__text {
      padding: $section-horizontal-spacing-mobile;

      @include tablet {
        padding: $section-vertical-spacing-mobile ($section-horizontal-spacing - $row-margin);
      }

      @include tablet {
        padding: $section-vertical-spacing ($section-horizontal-spacing - $row-margin);
      }
    }

    .section__image {
      background-position: center;
      background-size: cover;
      display: none;
      padding: 0;

      @include tablet {
        display: block;
      }
    }
  }
}

.red-theme {
  .section__header-header {
    border-color: theme-color("red");
  }
}

.yellow-theme {
  .section__header-header {
    border-color: theme-color("yellow");
  }
}

.green-theme {
  .section__header-header {
    border-color: theme-color("green");
  }
}

.blue-theme {
  .section__header-header {
    border-color: theme-color("blue");
  }
}

.purple-theme {
  .section__header-header {
    border-color: theme-color("purple");
  }
}

.pink-theme {
  .section__header-header {
    border-color: theme-color("pink");
  }
}

.section--green,
.section--pink,
.section--yellow {
  .section__header-header {
    border-color: theme-color("charcoal");
  }
}

.section--red,
.section--blue,
.section--purple,
.section--red,
.section--blue,
.section--purple {
  .section__header-header {
    border-color: color("white");
  }
}

.red-theme,
.blue-theme,
.pink-theme,
.yellow-theme,
.purple-theme,
.green-theme {
  .section--red,
  .section--blue,
  .section--purple,
  .section--red,
  .section--blue,
  .section--purple {
    .section__header-header {
      border-color: color("white");
    }
  }

  .section--green,
  .section--pink,
  .section--yellow {
    .section__header-header {
      border-color: theme-color("charcoal");
    }
  }
}