<div class="card">
  <h2>Title</h2>
  <div class="body">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum voluptas quo sed labore doloribus unde aliquam consectetur explicabo, ducimus sit?</p>
  </div>
  <button class="button">Add to Cart</button>
</div>

<div class="card variation">
  <h2>Title</h2>
  <div class="body">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum voluptas quo sed labore doloribus unde aliquam consectetur explicabo, ducimus sit?</p>
  </div>
  <button class="button">Add to Cart</button>
</div>

<div class="card variation-2" style="--card-title-border: 3px solid purple">
  <h2>Title</h2>
  <div class="body">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum voluptas quo sed labore doloribus unde aliquam consectetur explicabo, ducimus sit?</p>
  </div>
  <button class="button">Add to Cart</button>
</div>

* {
  box-sizing: border-box;
}
html {
  min-height: 100vh;
  background: radial-gradient(circle at bottom right, #607d8b, #90a4ae);
}
body {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  font: 100%/1.4 system-ui;
  margin: 0;
  padding: 2rem;
}

html {
  --color-1-hsl: 200deg 15% 73%;
  --color-1: hsl(var(--color-1-hsl));
}

.card {
  --card-background: var(--color-1);
  --card-border: 4px solid rgb(255 255 255 / 0.5);
  --card-padding-block: 2rem;
  --card-padding-inline: 2rem;
  --card-padding: var(--card-padding-block) var(--card-padding-inline);
  --card-border-radius: 8px;
  --card-title-margin: 0 0 1rem 0;
  --card-title-border: 3px solid rgba(0 0 0 / 0.2);

  background: var(--card-background);
  border: var(--card-border);
  padding: var(--card-padding);
  border-radius: var(--card-border-radius);

  box-shadow: 0 1px 1px rgb(0 0 0 / 0.1), 0 2px 2px rgb(0 0 0 / 0.1),
    0 4px 4px rgb(0 0 0 / 0.1), 0 8px 8px rgb(0 0 0 / 0.1),
    0 16px 16px rgb(0 0 0 / 0.1), 0 32px 32px rgb(0 0 0 / 0.1);
  h2 {
    margin: var(--card-title-margin);
    border-bottom: var(--card-title-border);
  }
}

.variation {
  --card-padding-block: 2.5rem;
  --card-background: hsl(var(--color-1-hsl) / 0.3);
  --card-title-margin: 0 0 2rem 0;
  --card-title-border: none;
}

.variation-2 {
  --card-border-radius: 22px;
}