@use "system/breakpoints";
@use "system/grid";
@use "system/typography";
@use "system/spacing";

.ods-service-header {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(12, 1fr);
  row-gap: grid.$gutter-size-large;

  &__main {
    grid-column: span 12;

    @include breakpoints.medium {
      grid-column: span 8;
    }

    &--no-image {
      @include breakpoints.medium {
        grid-column: span 12;
      }
    }
  }

  &__heading {
    @extend %ods-text--size-echo, %ods-text--size-bravo-breakpoint-medium, %ods-text--size-alfa-breakpoint-large;
  }

  &__lead {
    @extend %ods-margin-top-4;
    @extend %ods-text--size-hotel, %ods-text--size-golf-breakpoint-medium, %ods-text--size-delta-breakpoint-large;
    @extend %ods-text--weight-light;
  }

  &__image {
    grid-row-start: 1;
    display: grid;
    grid-column: 3 / 11;
    place-items: center;

    img {
      max-width: 10.125rem;
    }

    @include breakpoints.medium {
      grid-column: span 4 / -1;
      justify-items: end;

      img {
        max-width: 13.5rem;
      }
    }

    @include breakpoints.large {
      grid-column: span 4 / -1;
      justify-items: end;

      img {
        max-width: 18.75rem;
      }
    }
  }
}