.tabs {
  --tab-display-as: block;

  display: flex;
  flex-wrap: wrap;
  /* be explicit here since parent can have auto-size  (i.e flex: none) */
  align-self: flex-start;

}

.tabs > .tab {
  width: 100%;
  display: none;
  /* order makes it possible for tab to always appear below label */
  order: 1000;

  /* ↓ todo propertify... */
  padding-block-start: var(--space-m-l);
}

.tabs > input {
    display: none;
}

.tabs > input:checked + label + .tab  {
  display: var(--tab-display-as, block);
}

.tabs > input:checked + label + .tab img  {
  margin: 0;
  width: 100%;
}