.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 {
		@include headerDisplayBefore(2.5rem);
	}
}

h2.header-display {
	&::before {
		@include headerDisplayBefore(2rem);
	}
}

h3.header-display {
	&::before {
		@include headerDisplayBefore(1.75rem);
	}
}

h4.header-display {
	&::before {
		@include headerDisplayBefore(1.5rem);
	}
}

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

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

.logo-text-switch {
	fill: var(--logo-text-color);
}