<div class="wrapper">
  <button>Primary button</button>
  <button class="button--secondary">Secondary button</button>

  <blockquote>
    <p>I am a simple quote</p>
    <cite>Ms A. Person</cite>
  </blockquote>

  <blockquote class="blockquote--secondary">
    <p>I am a simple quote</p>
    <cite>Ms A. Person</cite>
  </blockquote>

  <div class="grid">
    <article class="card">
      <img
        src="https://images.unsplash.com/photo-1422205512921-12dac7b3b603?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDcyMzE0MzJ8&ixlib=rb-4.0.3&q=80&w=400"
        alt="Pink flowers in a meadow" />
      <div class="card__content">
        <h3>Card heading</h3>
        <a href="#0">Find out more</a>
      </div>
    </article>
    <article class="card card--secondary">
      <img
        src="https://images.unsplash.com/photo-1422205512921-12dac7b3b603?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDcyMzE0MzJ8&ixlib=rb-4.0.3&q=80&w=400"
        alt="Pink flowers in a meadow" />
      <div class="card__content">
        <h3>Card heading</h3>
        <a href="#0">Find out more</a>
      </div>
    </article>
  </div>
</div>

* {
  box-sizing: border-box;
}

:root {
  --base: orchid;
  --secondary: color-mix(in srgb, var(--base), lightblue 50%);
}

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  padding: 1rem;
}

p {
  margin-block: 0;
}

img {
  display: block;
  width: 100%;
}

a {
  color: inherit;
}

h3 {
  margin-block: 0;
}

.wrapper {
  max-width: 40rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

button {
  --color: var(--base);
  appearance: none;
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  background: var(--color);
}

button:where(:hover, :focus) {
  background: color-mix(in srgb, var(--color), white 20%);
}

.button--secondary {
  --color: var(--secondary);
}

blockquote {
  --color: var(--base);
  background: color-mix(in srgb, var(--color), white 75%);
  padding: 1rem;
  margin-inline: 0;
  border-left: 5px solid var(--color);

  p {
    font-size: 1.5em;
  }
}

cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
}

.blockquote--secondary {
  --color: var(--secondary);
}

.card {
  --color: var(--base);
  background: color-mix(in srgb, var(--color), white 75%);
  border-radius: 0.5rem;
  overflow: hidden;
}

.card--secondary {
  --color: var(--secondary);
}

.card__content {
  padding: 1rem;

  a {
    display: block;
    margin-top: 1rem;
    color: color-mix(in srgb, var(--color), black 40%);
  }
}