$lbcamden-hero-height: 442px;
$lbcamden-hero-max-width: 1440px;

.lbcamden-hero {
  position: relative;

  z-index: 1;
  right: 50%;
  left: 50%;

  width: 100vw;
  min-height: $lbcamden-hero-height;
  margin-right: -50vw;
  margin-left: -50vw;

  @include govuk-media-query($from: "tablet") {
    margin-bottom: govuk-spacing(6);
  }

  &__bg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: $lbcamden-hero-max-width;
    height: 100%;
    object-fit: cover;
    transform: translateX(-50%);
  }

  &__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0 govuk-spacing(1);

    h1 {
      @extend %govuk-heading-m;
      @include govuk-responsive-margin(1, "bottom");

      font-weight: 300;
    }

    h2 {
      @extend %govuk-heading-l;
      @include govuk-responsive-margin(4, "bottom");
    }

    @include govuk-media-query($from: "mobile-large") {
      flex-direction: row;
      align-items: flex-end;
      justify-content: flex-start;
    }

    @include govuk-media-query($from: "tablet") {
      margin: 0 govuk-spacing(-3);
    }

    @include govuk-media-query($from: "wide") {
      margin: 0 govuk-spacing(-4);
    }
  }

  &__spacer {
    flex-grow: 1;
    min-width: govuk-spacing(6);
  }

  &__engagement,
  &__links {
    @include govuk-responsive-margin(7, "top");
    @include govuk-responsive-margin(7, "bottom");

    display: inline-block;
    width: auto;
    padding: govuk-spacing(5);

    color: inherit;
    background-color: govuk-colour("white");
    text-decoration: none;

    @include govuk-media-query($from: "mobile-large") {
      width: 290px;
    }

    @include govuk-media-query($from: "tablet") {
      padding: govuk-spacing(5) govuk-spacing(4);
    }

    @include govuk-media-query($from: "desktop") {
      width: 390px;
    }

    &:visited {
      color: inherit;
    }

    > a {
      display: block;
      margin-bottom: govuk-spacing(2);
      font-weight: 600;

      &:after {
        content: " >";
      }
    }
  }

  &__links {
    flex-shrink: .3;
  }

  &__engagement {
    h2 {
      @extend %govuk-heading-m;
      @include govuk-responsive-margin(1, "bottom");
    }

    > *:last-child {
      margin-bottom: 0;
    }

    max-width: 610px;
    flex-grow: 1;
    flex-shrink: 1;

    @include govuk-media-query($until: "mobile-large") {
      margin-top: govuk-spacing(-4);
    }
  }
}

@media print {
  .lbcamden-hero .lbcamden-hero__bg {
    display: none;
  }

  .lbcamden-hero__links {
    margin: 0;
  }
}