.my-environment-header {
  display: flex;
  justify-content: space-between;

   &__title {
    &--ml {
      //title in job alerts
      @include font-style('title--xs', 'title--s');
    }

    &--m {
      //title in list/profile items
      @include font-style('title--xs', 'title--xs');
    }

    &--s {
      // title in card
      @include font-style('title--xxs', 'title--xs');
    }
  }
}

.my-environment-action-header {

  &__title {
  // title with + button under it & above a container item
    @include font-style('title--s' , 'title--s');
  }

  // center view-more button under action header (should be possible with header-only situation)
  ~.view-more-button {
    display: flex;
    justify-content: center;
  }

  // remove margin-top from button if only header & button are visible
  +.view-more-button .button {
    margin-top: unset;
  }
}

.my-environment-container h1 {
  @include font-style('title--s', 'title--l');
}

@include my-environment-bg-map;