// sass-lint:disable no-vendor-prefixes,

.service-intro {
  display: flex;
  flex-direction: column;
  width: 100%; // FF fix: take full width of grid-area

  & + & {
    margin-top: $spacer-lg;
  }
}

.service-intro__header {
  @extend %h1;

  margin-bottom: $spacer-md;
  line-height: 1.38;
  color: $service-intro-text-color;
  font-size: $font-size-xl;

  a,
  a:not([class]) {
    box-shadow: $spacer-xxs 0 0 $brand-primary, -$spacer-xxs 0 0 $brand-primary;
    background-color: $brand-primary;
    padding: ms(-16);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    &:hover {
      background-color: $brand-primary;
    }
  }
}

.service-intro__text {
  @extend %heading-font-bold;

  margin-bottom: $spacer-md;
  line-height: $paragraph-line-height;
  color: $service-intro-text-color;
  font-size: $font-size-base;
}

@media screen and (min-width: $grid-breakpoint-md-lg) {
  .service-intro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: $spacer-lg;
    grid-column-gap: $spacer-lg;
  }

  .service-intro {
    border-right: 1px solid $brand-gray-25;
    padding: $spacer-sm $spacer-base $spacer-base 0;
    grid-column: span 2;

    & + & {
      margin-top: 0;
    }

    &:nth-child(2n) {
      border-right: 0;
    }
  }

  .service-intro__header {
    margin-bottom: $spacer-base;
    line-height: 1.35;
    font-size: $font-size-xxl;
  }

  .service-intro__text {
    margin-bottom: $spacer-base;
    font-size: $font-size-sm;
  }
}

@media screen and (min-width: $grid-breakpoint-xl) {
  .service-intro-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .service-intro {
    &:nth-child(2n) {
      border-right: 1px solid $brand-gray-25;
    }

    &:nth-child(3n) {
      border-right: 0;
    }
  }
}