responsive hero

by batcave

HTML

<div class="container">
  <div data-am-promogrid>
    <div class="grid-col deepskyblue">
      <div class="content-container">
        <h3>
				Headline here that breaks into.
			</h3>
        <p class="text">
          Nullam dictum felis eu pede mollis etium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulutate eleifend tellus. Aean leo liula, porttitor eu consequat vitae, eleifend ac, enim.
        </p>
        <a href="" class="link">Läs mer</a>
      </div>
    </div>
    <div class="grid-col">
      <div class="background-image" style="background-image: url(https://images.unsplash.com/photo-1452215199360-c16ba37005fe?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=408c70a6e88b50949c51e26424ff64f3);">

      </div>
    </div>
  </div>
</div>

SCSS

.container {
  padding: 20px;
}

[data-am-promogrid] {
  $height: 300px;
  display: table;
  height: $height;
  width: 100%;
	
  .grid-col {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    width: 50%;
  }
	
  .background-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-positon: center;
    background-size: cover;
  }
	
  .deepskyblue {
    background-color: deepskyblue;
  }
	
  .aqua {
    background-color: aqua;
  }
}