<div class="products">
          <!-- Product One -->
          <article class="product">
            <div class="product__image"></div>
            <header class="product__header">
              <h1 class="product__title">Product One</h1>
            </header>
            <p class="product__description">
              Sed ut perspiciatis unde omnis iste natus error sit
              voluptatem accusantium doloremque laudantium, totam rem
              aperiam, eaque ipsa quae ab illo inventore veritatis et
              quasi architecto beatae vitae dicta sunt explicabo.
            </p>
          </article>

          <!-- Product Two -->
          <article class="product">
            <div class="product__image"></div>
            <header class="product__header">
              <h1 class="product__title">Product Two</h1>
            </header>
            <p class="product__description">
              Sed ut perspiciatis unde omnis iste natus error sit
              voluptatem accusantium doloremque laudantium, totam rem
              aperiam, eaque ipsa quae ab illo inventore veritatis et
              quasi architecto beatae vitae dicta sunt explicabo.
            </p>
          </article>

          <!-- Product Three -->
          <article class="product">
            <div class="product__image"></div>
            <header class="product__header">
              <h1 class="product__title">Product Three</h1>
            </header>
            <p class="product__description">
              Sed ut perspiciatis unde omnis iste natus error sit
              voluptatem accusantium doloremque laudantium, totam rem
              aperiam, eaque ipsa quae ab illo inventore veritatis et
              quasi architecto beatae vitae dicta sunt explicabo.
            </p>
          </article>

          <!-- Product Four -->
          <article class="product">
            <div class="product__image"></div>
            <header class="product__header">
              <h1 class="product__title">Product Four</h1>
            </header>
            <p class="product__description">
              Sed ut perspiciatis unde omnis iste natus error sit
              voluptatem accusantium doloremque laudantium, totam rem
              aperiam, eaque ipsa quae ab illo inventore veritatis et
              quasi architecto beatae vitae dicta sunt explicabo.
            </p>
          </article>

          <!-- Product Five -->
          <article class="product">
            <div class="product__image"></div>
            <header class="product__header">
              <h1 class="product__title">Product Five</h1>
            </header>
            <p class="product__description">
              Sed ut perspiciatis unde omnis iste natus error sit
              voluptatem accusantium doloremque laudantium, totam rem
              aperiam, eaque ipsa quae ab illo inventore veritatis et
              quasi architecto beatae vitae dicta sunt explicabo.
            </p>
          </article>
        </div>
:root {
  --spacing-base: 1rem;
  --spacing-double: 2rem;

  --font-size-base: 16px;
  --font-family-base: sans-serif;
  --line-height-base: 1.4;

  --color-base: #353535;
  --color-white: white;
  --color-background: rgba(74 214 199 / 1);

  --products-gutter: var(--spacing-double);

  --product-shadow: -11px 11px 1px rgba(0 0 0 / 0.3);
  --product-min-size: 17em;
  --product-background: var(--color-white);
  --product-title-size: 1.5em;
  --product-image-height: 12em;
  --product-border-radius: 25px;
  --product-vertical-rhythm: var(--spacing-base);
  --product-image-color-one: #fa782e;
  --product-image-color-two: #c82930;
}

* {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;

  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-family: var(--font-family-base);

  color: var(--color-base);
  background-color: var(--color-background);
}

.products {
  grid-gap: var(--products-gutter);
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      clamp(50% - var(--products-gutter), var(--product-min-size), 100%),
      1fr
    )
  );
  display: grid;
  margin: var(--products-gutter);
}

.product {
  padding: var(--spacing-base);

  box-shadow: var(--product-shadow);
  border-radius: var(--product-border-radius);
  background-color: var(--product-background);
}

.product__header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  display: flex;
  margin-top: var(--product-vertical-rhythm);
  margin-bottom: var(--product-vertical-rhythm);
}

.product__title {
  margin: 0;

  font-size: var(--product-title-size);
  line-height: 1;
}

.product__image {
  height: var(--product-image-height);

  margin: calc(-1 * var(--product-vertical-rhythm))
    calc(-1 * var(--product-vertical-rhythm)) 0;

  border-top-left-radius: var(--product-border-radius);
  border-top-right-radius: var(--product-border-radius);
  background: linear-gradient(
    135deg,
    var(--product-image-color-one) 8%,
    var(--product-image-color-two) 83%
  );
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.