.color {
  height: 100px;
}

.grid {
  height: 100px;
  background-color: $primary;
  border-radius: 7px;

  & span {
    margin: 10px 10px 10px 10px;
    color: white;
  }
}

.header-display {
	&::before {
		background: $secondary;
		content: " ";
		display: inline-block;
		width: 7px;
	}
}

h1.header-display {
	&::before {
		height: 3.75rem; // 150% of text-size
		transform: translate(-15px, 0);
		margin-bottom: -0.937rem; // 25% of height
	}
}

h2.header-display {
	&::before {
		height: 3rem;
		transform: translate(-15px, 0);
		margin-bottom: -0.75rem;
	}
}

h3.header-display {
	&::before {
		height: 2.625rem;
		transform: translate(-15px, 0);
		margin-bottom: -0.65625rem;
	}
}

h4.header-display {
	&::before {
		height: 2.25rem;
		transform: translate(-15px, 0);
		margin-bottom: -0.5625rem;
	}
}

.icon {
  font-size: 20px;
  background-color: $oc-gray-9;
  padding: 20px;
}

.typography__headers__item {
	margin-bottom: 2rem;
	p {
		margin-bottom: 0.5rem !important;
	}
}