.bg-light {
	background: #fafafa;
}

.block-link {
	color: #333;
}

.block-link span.more {
	color: #08c;
}

.block-link:hover span.more {
	text-decoration: underline;
}

.image-hero {
  width:100%;
  height:549px;
  background-image: url('/homekit/images/homekit-device-hero-large.png');
  background-repeat: no-repeat;
  background-size: 902px 549px;
  background-position: center;
}

@media all and (min-device-width: 736px)and (max-width: 1068px) {
	.image-hero {
		background-size: 715px 435px;
		height: 435px;
	  background-image: url('/homekit/images/homekit-device-hero-medium.png');
	}
}

@media all and (max-width: 735px) {
	.image-hero {
		background-size: 283px 172px;
	  height:172px;
	  background-image: url('/homekit/images/homekit-device-hero-small.png');
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .image-hero {
    background-image: url('/homekit/images/homekit-device-hero-large_2x.png');
  }
}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
    .image-hero {
        background-image: url("/homekit/images/homekit-device-hero-medium_2x.png")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .image-hero {
        background-image: url("/homekit/images/homekit-device-hero-small_2x.png")
    }
}
