.gd-step {
	background-color: #f9f9f9;
	padding: 1rem;
	margin-top: 2rem;
	margin-bottom: 2rem;


	@media screen and (min-width: 48em) {
		& {
			padding: 3.75rem;
      min-height: 550px;
		}
	}

	.gd-step__heading {
    --height: 8rem;
    position: relative;
    z-index: 1;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    height: var(--height);
    padding-left: 1rem;

		@media screen and (max-width: 47.99em) {
			& {
				max-width: 13rem;
			}
		}

		@media screen and (min-width: 48em) {
			& {
				font-size: 1.125rem;
				--height: 10rem;
			}
		}

		&:before {
			position: absolute;
			left: 0;
			top: 0;
			content: attr(data-index);
      font-size: var(--height);
      line-height: var(--height);
			color: #e8e8e8;
			z-index: -1;
			margin-left: -1rem;
		}
	}

  .gd-step__body {
    font-size: 1rem;
    line-height: 2;
  }
  
}