.blog .cover,
.page .cover,
.home.blog .cover,
.single .cover {
  height: 320px;
  min-height: auto;
}

.home .cover,
.cover {
	background-color: rgba($color-black, 1);
	height: auto;
	min-height: auto;
	overflow: hidden;
	position: relative;

	@media (min-width: $breakpoint-tablet) {
		align-items: center;
		display: flex;
		height: 320px;
		justify-content: center;
		min-height: 480px;
		position: relative;
	}

  .cover-overlay {
		display: none;

		@media (min-width: $breakpoint-tablet) {
			background-color: rgba($color-black, 0.65);
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 10;
		}
  }

  .cover-body {
		margin: 0 5%;
		padding: 15% 0;
    position: relative;
    text-align: center;
    width: 90%;

		@media (min-width: $breakpoint-tablet) {
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
			left: 0;
			margin-left: 25%;
			padding: 0;
			position: absolute;
			text-align: center;
			top: 0;
			width: 50%;
			z-index: 20;
		}

		h1 {
			color: $color-light;
      font-size: 3rem;
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 20px;
		}

		p {
      font-size: 1.4rem;
      line-height: 1.4;
      color: $color-light;
      font-weight: 400;
		}
  }

  img,
  .cover-img {
    min-width: auto;

		@media (min-width: $breakpoint-tablet) {
			min-width: 100%;
			width: 100%;
		}
  }

  a.scrollbody {
    background-color: rgba($color-black, 0.3);
    bottom: 0;
		color: $color-white;
    font-size: 1rem;
    left: 0;
    padding: 1rem 0;
    position: absolute;
    text-align: center;
		text-decoration: none;
    width: 100%;
    z-index: 40;

		i {
			font-size: 2rem;
			line-height: 1;
		}
  }
}