https://buildexcellentwebsit.es/: Be the browser’s mentor, not its micromanager. For forth and build great websites!

flow-fluid-baseline.css

*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role="list"],
ol[role="list] {
  list-style: none;
}

html {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-link: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

flow-fluid-body.css

body {
  color: var(--color-dark);
  background: var(--color-light);
  font-size: var(--size-step-1);
  font-family: var(--font-base);
  line-height: 1.4;
  letter-spacing: var(--tracking); 
}

flow-fluid-card.css

.card {
  background: var(--color-dark);
  color: var(--color-light);
  padding: var(--space-m-l);
  border-radius: var(--border-radius);
  max-width: unset;
}

flow-fluid-features.css

.features {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
  --gutter: var(--space-l-xl);
  --flow-space: var(--space-s);
  
  text-align: center;
}

.features svg {
  display: block;
  margin-inline: auto;
  height: 4em;
}

.features a {
  text-decoration: none;
}

.features a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.08ex;
  text-decoration-underline-offset: 0.2ex;
}

flow-fluid-grid.css

.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-s-l));
}

flow-fluid-region.css

.region {
  padding-inline-start: var(--region-space, var(--space-l-2xl));
  padding-inline-end: var(--region-space, var(--space-l-2xl));
}

flow-fluid-two-columns.css

.grid[data-layout="50-50"] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 26rem);
}

.grid[data-layout="masonry"] {
  grid-template-rows: masonry;
  align-items: start;
}

fluid-flow-headings-and-text.css

h1,
h2,
h3 {
  line-height: 1;
  letter-spacing: var(--tracking-s);
}

h1 {
  font-size: var(--step-size-5);
}

h2 {
  font-size: var(--step-size-4);
}

h3 {
  font-size: var(--step-size-3);
}

p,
li,
blockquote:not([class]) {
  max-width: 50ch;
}

h1,
h2,
h3 {
  max-width: 20ch;
}

lobotomized-style-selector.css

.flow > * + * {
  margin-inline-start: var(--flow-space, 1em);
}

questionably-clever.html

<ul class="grid" role="list" data-rows="masonry" data-layout="50-50">
...
</ul>

<style>
  [role='list'] {
    padding: 0;
  }
</style>

root.css

:root {
  --color-primary: var(--color-theme-token);
  --color-primary-glare: var(--color-theme-token);
  --color-secondary: var(--color-theme-token);
  --color-secondary-glare: var(--color-theme-token);
  
  --space-s: var(--utopia-space-token);
  --space-m: var(--utopia-space-token);
  --space-l: var(--utopia-space-token);
  
  --size-step-1: var(--utopia-type-token);
  --size-step-2: var(--utopia-type-token);
  --size-step-3: var(--utopia-type-token);
  
  --gutter: var(--space-s-m);
  
  --border-radius: var(--size-step-1);
  
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 200ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.5, 0.2, 1.5);
  
  --tracking: -0.05ch;
  --tracking-s: -0.075ch;
}