```CSS
/* Flexbox layout: Horizontally spaced, wrapping boxes */
.horizontal-flex {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
}
.flex-box {
flex: 1 1 200px;
min-width: 200px;
padding: 1rem;
border: 1px solid var(--color-base-30);
border-radius: 8px;
background-color: var(--background-primary);
box-shadow: var(--shadow-s);
}
/* Grid layout: Responsive, fluid columns */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.grid-box {
padding: 1rem;
border: 1px solid var(--color-base-30);
border-radius: 8px;
background-color: var(--background-primary);
box-shadow: var(--shadow-s);
}
```
<div class="horizontal-flex">
<div class="flex-box"><center>Box 1</center></div>
<div class="flex-box">Box 2</div>
<div class="flex-box">Box 3</div>
</div>
<div class="responsive-grid">
<div class="grid-box">Box A</div>
<div class="grid-box">Box B</div>
<div class="grid-box">Box C</div>
</div>