<section class="dl-blurbs">
<dl>
	<dt>Design</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
	<dt>Develop</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
	<dt>Test</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
</dl>
<dl>
	<dt>Deliver</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
	<dt>Rinse</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>

	<dt>Repeat</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
</dl>
</section>
//- Google Fonts
$font-google-primary: 'https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap';
$font-google-secondary: 'https://fonts.googleapis.com/css2?family=Montserrat&display=swap';

//- @type List
$abril-fatface: 'Abril Fatface', cursive;
$montserrat: 'Montserrat', sans-serif;

//- Typography
$base-font-family: $montserrat;
$heading-font-family: $abril-fatface;

$font-size-small: 0.875em;

/*- Screen Sizes*/
$tablet-width: 768px;
$desktop-width: 1024px;

/* COLOR HEX */
$cadet: #4f6d7aff;
$maximum-blue: #5ea5b8ff;
$columbia-blue: #c0d6dfff;
$platinum: #eaeaeaff;
$cultured: #f3f3f3ff;
$nero: #444444;

/* COLOR Gradient */
$dl-gradient-right: linear-gradient(90deg, rgba(0,0,0,0.04) 20%, rgba(255,255,255,0) 0%);

$body-background-color: $platinum;
$body-text-color: $nero;

//- Global Functions
/*import fonts*/
@if variable-exists(font-google-primary) {
  @import url($font-google-primary);
}
@if variable-exists(font-google-secondary) {
  @import url($font-google-secondary);
}

//- Global Mixins

/*media queries*/
@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

@mixin tablet-up {
  @media (min-width: #{$tablet-width}) {
    @content;
  }
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
    background-color: $body-background-color;
    font-family: $base-font-family;
    font-size: $font-size-small;
    color: $body-text-color;
    line-height: 1.5;
}
.dl-blurbs {
	display: grid;
	@include tablet-up {
		grid-template-columns: repeat(2, 1fr);
		gap: 2vw;
	}
}
/* LIST */
dl {
  counter-reset: count;
	background: $dl-gradient-right;
	padding-left: 4vw; //default is smartphone
	padding-right: 4vw;
	margin: 0;
	@include tablet-up {padding-left: 2vw;}
	@include desktop {
		padding-top: 3vw;
		padding-bottom: 3vw;
	}
	
}
dl + dl {
	counter-reset: counter 4;
}
dt {
  counter-increment: count;
	color: $cadet;
	font-family: $base-font-family;
	font-size: 4vw;
	text-transform: uppercase;
}
dt::before {
  content: counter(count, decimal-leading-zero)".";
	font-family: $heading-font-family;
	color: $maximum-blue;
	margin-left: -1vw;
	padding-right: 12px;
}

dd {
	margin-left: 5vw;
	margin-bottom: 2vh;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.