.sf-heading { display:block; }
.sf-heading__link { text-decoration: none; display: inline-block; }
.sf-heading__title { margin:0; padding:0; }
.sf-heading__pre, .sf-heading__sub { margin:0; padding:0; }

/* Domyślnie: układ blokowy (pre nad tytułem, sub pod tytułem) */
.sf-heading__row { display:block; }

/* PRE po lewej: robimy flex i wrap */
.sf-heading--pre-left .sf-heading__row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
}

/* PRE nad tytułem */
.sf-heading--pre-above .sf-heading__pre{ display:block; }

/* PRE po lewej */
.sf-heading--pre-left .sf-heading__pre{ display:inline-block; }

/* SUB pod tytułem: w trybie flex (pre-left) ma zejść na nową linię i zająć 100% */
.sf-heading--pre-left.sf-heading--sub-below .sf-heading__sub{
  flex-basis:100%;
  width:100%;
}

/* SUB po prawej */
.sf-heading--sub-right .sf-heading__sub{
  display:inline-block;
}