<main>
  <div class="auto-grid">
    <div class="preview" style="border-width: thin">
      <code>border-width: thin;</code>
    </div>
    <div class="preview" style="border-width: medium">
      <code>border-width: medium;</code>
    </div>
    <div class="preview" style="border-width: thick">
      <code>border-width: thick;</code>
    </div>
  </div>
</main>

.preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  border-color: var(--color-primary);
  border-style: solid;
  aspect-ratio: 2/1;
  min-height: 8rem;
}

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size, 16rem), 1fr));
  gap: 1rem;
  padding: 0;
}

main {
  width: 100%;
}