///////////////////////////////////
// THEME / DEPRECATED / PROMO IMAGE
///////////////////////////////////


@use "../variables/" as var;
@use "../mixins/" as mixins;


.wdn-promo-band {
	background: var.$darker-gray;
	position: relative;
}

.wdn-promo-band img,
.wdn-promo-band video {
  display: block;
}

.wdn-promo-container {
	background-image: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 75%, rgba(0,0,0,.3) 100%);
	bottom: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.wdn-promo-content {
  bottom: 5%;
  color: #fff;
  position: absolute;
  text-align: center;
  text-shadow: 0 0 10px rgba(0,0,0,.5);
  text-transform: uppercase;
  width: 100%;
}

.wdn-promo-content a {
  text-shadow: none;
}

.wdn-promo-text {
  display: block;
  font-weight: bold;
  line-height: 1;
  padding-left: 5.6%;
  padding-right: 5.6%;
  @include mixins.txt-h2;
}

.wdn-promo-text + a {
  margin-top: 1em;
}

.wdn-promo-container.wdn-inverse {
	background-image: linear-gradient(rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.3) 100%);
}

.wdn-promo-container.wdn-inverse .wdn-text-over-image {
	color: var.$color-body-light-mode;
	text-shadow: 0 0 10px rgba(255,255,255,.5);
}


@media only screen and (min-width:30em) {

	.wdn-promo-content {
    bottom: 7%;
  }

  .wdn-promo-text {
    @include mixins.txt-xl;
  }

}


@media only screen and (min-width:48em) {

	.wdn-promo-content {
    bottom: 10%;
  }

}
