@import '../../settings/variables';
@import '../../tools/mixins/breakpoints';

.c-section {
  color: $color-paragraph-dark;
  padding: 1.7em 0;
  line-height: 1.75em;

  @include media-breakpoint-up(md) {
    padding: $gutter-medium 5em;
  }

  &--alternative {
    background-color: $color-background-alternative;
    padding-bottom: 3em;
    @include media-breakpoint-up(md) {
      padding-botom: 4.5em;
    }
  }

  &--dark {
    background-color: $color-paragraph-dark;
    color: $color-neutral;
  }

  &--features-container {
    padding: 2.5em 2em;
    @include media-breakpoint-up(md) {
      padding: 4em 2em;
    }
    div:not(:last-child) div:only-child {
      @include media-breakpoint-down(md) {
        padding-bottom: 2em;
      }
    }
  }

  &--about-us {
    @include media-breakpoint-up(md) {
      padding: 0 5em;
    }
  }

  &--about-us-padded {
    @include media-breakpoint-up(sm) {
      padding: 0 4em;
    }
  }

  &--about-us-feature-padded {
    @include media-breakpoint-up(md) {
      padding-right: 4em;
    }
  }

  &--about-us-text {
    @include media-breakpoint-up(md) {
      padding-right: 5em;
    }
  }

  &__title {
    font-family: $font-maersk-headline;
    font-weight: $font-weight-normal;
    color: $color-paragraph;
    font-size: 1.325em;
    margin-top: $margin-enormous;
    margin-bottom: $margin-normal;
    line-height: 1.35em;

    @include media-breakpoint-up(md) {
      font-size: 1.6em;
    }
  }

  &__subtitle {
    margin-bottom: $margin-enormous;
    font-size: 1em;
    line-height: 1.5em;
    color: $color-secondary;

    @include media-breakpoint-up(md) {
      padding: 0 4em;
    }
  }

  &--image {
    background-size: cover;
    background-position: 50% 0;
  }

  &--bottom-bordered {
    border-bottom: $hairline solid $color-separator;
  }
}