<div class="Card">
  <div class="Image"></div>
  <p class="Heading w-75"></p>
  <p class="Paragraph"></p>
  <p class="Paragraph w-90"></p>
  <p class="Paragraph"></p>
  <br />
  <p class="Paragraph w-50"></p>
  <p class="Paragraph"></p>
  <br />
  <div class="ButtonGroup">
    <div class="Button"></div>
    <div class="Button Button--cta"></div>
  </div>
</div>
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over A-viewport-width to B-viewport-width.
 * Requires a media query to cap the value at B.
 */
 
@function between($from, $to, $fromWidth, $toWidth) {
  $slope: ($to - $from) / ($toWidth - $fromWidth);
  $base: $from - $slope * $fromWidth;

  @return calc(#{$base} + #{100vw * $slope});
}


$small: 425px; 
$large: 1024px;

$white: #ffffff;
$lightGray: #dbdfe3;
$mediumGray: #c4c8cb;
$darkGray: #aeb2b7;
$blue: #0087be;
$pink: #f25292;

:root {
  // 10px in <$small
  font-size: 10px;

  // Calculate between $small and $large
  @media (min-width: $small) {
    font-size: between(18px, 10px, $large, $small);
  }

  // Cap at 18px in >$large
  @media (min-width: $large) {
    font-size: 18px;
  }
}

html, body {
  min-height: 100vh;
}

body {
  background: $blue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Card {
  background: $white;
  border-radius: 5px;
  width: 22rem;
  margin: auto;
  padding: 1.25rem;
}

.Image {
  background: $mediumGray;
  border-radius: 3px;
  height: 10rem;
  margin-bottom: 1.5rem;
}

.Paragraph {
  background: $mediumGray;
  border-radius: 3px;
  margin-bottom: 0.65rem;
  height: 1rem;
  
  &--small {
    height: 0.75rem;
  }
  
  &:last-child {
    margin-bottom: 0;
  }
}

.Heading {
  height: 1.5rem;
  background: $darkGray;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.ButtonGroup {
  display: flex;
}

.Button {
  background: $lightGray;
  height: 2.25rem;
  width: 50%;
  border-radius: 6px;
  
  &--cta {
    background: $pink;
  }
  
  & + & {
    margin-left: 1rem;
  }
}


br {
  display: block;
  margin-bottom: 1.5rem;
  content: '';
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-90 {
  width: 90%;
}

.right {
  margin-left: auto;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.