<div class="card">
  <div class="visual"></div>
  <div>
    <div class="meta">
      <h2>Card Title</h2>
    </div>
      <p class="desc">Here is some descriptive text about this card so you know what you're about to click in to. Does anyone read the text though?</p>
    <button>I'm a button</button>
  </div>
</div>
:root {
  color-scheme: light dark;
  --imageBg: gray;
  --cardBg: lightpink;
  --btnBg: lightgreen;
}

@media (prefers-color-scheme: dark) {
  :root {
    --imageBg: lightgray;
    --cardBg: #b64f9f;
    --btnBg: darkGreen;
  }
}

body {
  font-family: system-ui, serif;
  padding: 3rem;
}

// Card

// Base Styles
.visual {
  aspect-ratio: 16 / 9;
  background: var(--imageBg);
}

.card {
  text-align: center;
  padding: 0.5rem;
  max-width: 260px;
  padding: 1rem;
  margin: 0 auto;
  background: var(--cardBg);
  border: 1px solid currentColor;
}

button {
  padding: 0.5rem;
  border: 1px solid;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  background-color: var(--btnBg);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.