.c-frontpage-film {
  margin-top: $spacing--large;
  &__film-text {
    &--narrow {
      @include mq(tabletWide) {
        display: none;
      }
    }
    &--wide {
      @include mq($until: tabletWide) {
        display: none;
      }
    }
  }
  &__image {
    background: $brand-color--lighter;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -$spacing--medium center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 120px;
    padding: $spacing $spacing--medium $spacing $spacing;
    span {
      color: $brand-color--dark;
      @include font-size(18px, 26px);
      width: 66.6%;
      padding-right: $spacing;
      @include mq(mobileWide) {
        padding-left: 0;
        width: 66.6%;
      }
    }
    @include mq(mobileWide) {
      background-position: $spacing--small center;
    }
    @include mq(tablet) {
      min-height: 140px;
      background-position: 6% center;
    }
    @include mq(tabletWide) {
      min-height: 200px;
      background-position: $spacing center;
    }
    @include mq(desktop) {
      span {
        font-weight: $font-weight-semibold;
        padding-right: $spacing--medium;
      }
      min-height: 230px;
      background-position: $spacing center;
    }
    @include mq(wide) {
      background-position: $spacing--large center;
      span {
        padding-right: $spacing--large;
      }
    }
  }
  &__link-container {
    display: flex;
    justify-content: flex-end;
    margin-top: $spacing;
    @include font-size(14px);
    .c-icon {
      margin-left: $spacing--small;
    }
  }
}