Large Signpost Article: Full Width

.large-signpost-article {
  position: relative;
  overflow: hidden;
  border-radius: 0.8rem;
  display: block;
  text-decoration: none;
  cursor: pointer;
  margin: 0 auto;
  max-width: 119.5rem;

  &__img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 480px;
    max-height: 480px;
    border-radius: 0.8rem;
    transition: transform 0.3s ease-in-out;
  }

  &--gradient {
    background: linear-gradient(
      180deg,
      rgba(var(--brand-primary-rgb), 0) 52.02%,
      rgba(var(--brand-primary-rgb), 0.14) 71.6%,
      var(--brand-primary) 94.79%
    );
    bottom: 0;
    content: '';
    display: block;
    height: 100%;
    top: 0;
    width: 100%;
    position: absolute;
    border-radius: 0 0 0.8rem 0.8rem;
  }

  &__title {
    @extend .efl-heading-2;

    color: $white;
    letter-spacing: 0.02em;
    z-index: 2;
    width: 100%;
    padding: 0 30px 0 24px;
    bottom: 76px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
  }
  &__tag {
    bottom: 1.6rem;
    z-index: 2;
  }
  &__tag p {
    font-family: $text-font-ef;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2rem;
    letter-spacing: 0.02em;
    color: $white;
    left: 0;
    right: 0;
    margin-left: 2.4rem;
    text-align: left;

    span {
      margin: 0 8px 0 16px;
      &::after {
        content: '';
        background: url('./assets/images/clock-icon-white.svg') no-repeat center;
        height: 1.4rem;
        width: 1.4rem;
        position: relative;
        display: inline-block;
        top: 0.2rem;
        margin-left: 2.4rem;
      }
    }
  }

  &__overlay {
    width: 114rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    &::after {
      content: '';
      background: linear-gradient(
        180deg,
        rgba(34, 34, 34, 0) 38.98%,
        rgba(34, 34, 34, 0.315) 100%
      );
      width: 100%;
      height: 100%;
      display: block;
    }
    &.text-middle {
      justify-content: center;
      align-items: center;
      .large-signpost-article__title {
        width: 100%;
        padding: 0 27px;
        text-align: center;
        bottom: 0;
        position: initial;
        align-items: center;
      }
      .large-signpost-article__tag p {
        margin-left: 0;
        text-align: center;
      }
    }
    &.text-center {
      .large-signpost-article__title {
        margin: 0 auto;
        text-align: center;
        padding: 0 27px;
        width: 100%;
        left: 0;
        right: 0;
      }
      .large-signpost-article__tag {
        margin: 0 auto;
        text-align: center;
        left: 0;
        right: 0;
      }
      .large-signpost-article__tag p {
        margin-left: 0;
        text-align: center;
      }
    }
  }

  .large-signpost-article__overlay--middle {
    justify-content: center;
  }

  &:hover {
    .large-signpost-article__img {
      transform: scale(1.1);
    }
  }

  &.full-width {
    border-radius: 0;
    .large-signpost-article {
      &__overlay {
        &::after {
          display: none;
        }
      }
      &__img {
        border-radius: 0;
      }
      &--gradient {
        border-radius: 0;
      }
    }
    &:focus {
      outline: 3px solid $blue-accent3;
    }
  }

  @media screen and (min-width: $mq-medium) {
    &__img {
      height: 100%;
    }
    &__title {
      padding-left: 0;
      width: 960px;
      bottom: 92px;
      white-space: pre-wrap;
    }
    &__tag {
      width: 960px;
    }
    &__tag p {
      margin-left: 0;
    }
    &__overlay {
      &.text-middle {
        .large-signpost-article__title {
          padding-left: 0;
          width: 960px;
          text-align: center;
          bottom: 0;
        }
      }
      &.text-center {
        .large-signpost-article__title {
          padding-left: 0;
          width: 960px;
        }
      }
    }
    &.full-width {
      .large-signpost-article__img {
        height: 520px;
        max-height: 520px;
      }
    }
  }
}

:root [data-brand='englandfootball'],
:root [data-brand='englandfootball--supplimentary'] {
  .large-signpost-article {
    &__tag p {
      font-family: $text-font-ef;
    }
  }
}

:root [data-brand=''] {
  .large-signpost-article {
    &--gradient {
      background: linear-gradient(
        180deg,
        rgba(33, 76, 153, 0) 45.31%,
        rgba(33, 76, 153, 0.34) 68.68%,
        #214c99 94.79%
      );
    }
    &__overlay {
      &::after {
        display: none;
      }
    }

    @media screen and (max-width: $mq-medium) {
      &--gradient {
        height: 22.6rem;
        top: initial;
        bottom: 0;
      }
    }
  }
}