.focal-point-wrap{
  position: relative;
}
/*modern browsers*/
picture.fixed-aspect{
  display:block;
  position:relative;
}
picture.fixed-aspect img {
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;bottom:0;right:0;left:0;
    object-fit: cover;
    object-position: 50% 50%; /*overidden inline if provided*/
}
picture.fixed-aspect video.video-background {
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;bottom:0;right:0;left:0;
    object-fit: cover;
    object-position: 50% 50%; /*overidden inline if provided*/
}

/*fallback for picture.fixed-aspect. See required object-fit-polyfill.js*/
.bg-image-fallback{
  background-size: cover;
}
.focal-point-wrap a:hover{
    text-decoration:none;
}
.focal-point-wrap figure {
  position: relative;
  overflow: hidden;
}
.focal-point-wrap figure.banner figcaption {
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10%;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.focal-point-wrap figcaption.with-text-shadow {
    text-shadow: 0 0 10px rgba(0,0,0,.25);
}
figure.banner picture {
  padding-bottom: 380px
}

@media (min-width: 992px) {
  .focal-point-wrap figure.banner picture {
    padding-bottom:640px
  }
}
/**this is especially for your favorite browser and mine**/
.focal-point-wrap figure figcaption h1 {
    max-width: 100%;
}
.focal-point-wrap figure figcaption p {
  overflow: hidden;
  padding-bottom: 5px;
}
.focal-point-wrap figure figcaption * {
  position: relative;
}
.focal-point-wrap figure figcaption:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}