_mod_article.scss

• container queries möglich
• default article hat ein padding-block als Abstand zu anderen Artikeln
• .inside macht eine default Breitenbegrenzung
• die Breite kann über eine Klasse bei .mod_article breiter oder schmäler gewählt werden: .mod_article.small bzw. mod_article.extra-wide
• Artikel, deren .inside eingefärbt wird, erhalten hier ein default margin/padding
• -mod_article.full-width haben keine default Breitenbegrenzung mit max-width, aber die Klasse .inside sorgt dafür, dass die Texte nicht am Rand kleben

layout/_mod_article.scss

@use "../abstracts/" as *;

.mod_article {
  container-type: inline-size;
  container-name: modArticle;
}

// wrapper .inside, padding-block
// width, full-width
// special articles (hero, parallax, ...)
// spacing within articles

// default template .mod_article
.mod_article {
  padding-block: $article-padding-block;
  .inside {
    @include wrapper-inside;
  }
}

// smaller and wider .inside
.mod_article.small {
  .inside {
    --max-width: #{$wrapper-small};
  }
}
.mod_article.extra-wide {
  .inside {
    --max-width: #{$wrapper-extra-wide};
  }
}

// colored inside
.mod_article.colored-inside {
  // margin-block is not obligatory
  margin-block: 1.5rem;
  padding-block: unset;
  .inside {
    padding-block: 1.5rem;
    padding-inline: 1rem;
  }
}

// full-width
.mod_article.full-width {
  .inside {
    --padding: #{$wrapper-min-margin-inline} * 2;
    width: min(100% - var(--padding));
    margin-inline: auto;
  }
}