/* ============================================================
   UH post header. Loaded by post.hbs only.
   Feature image full bleed above the title, as on the homepage.
   ============================================================ */

article[data-post-header-type="Wide"] .hero-content,
article[data-post-header-type="Narrow"] .hero-content {
  display: flex;
  flex-direction: column;
}

/* Negative margins match .wide-container's padding at each breakpoint. */
.post-main-image-wrapper-header {
  order: -1;
  width: auto;
  margin-top: 0;
  margin-left: -42px;
  margin-right: -42px;
}

.post-main-image-wrapper-header figcaption {
  padding-left: 42px;
  padding-right: 42px;
}

@media (min-width: 1439px) {
  .post-main-image-wrapper-header {
    margin-left: -2.92vw;
    margin-right: -2.92vw;
  }

  .post-main-image-wrapper-header figcaption {
    padding-left: 2.92vw;
    padding-right: 2.92vw;
  }
}

@media (max-width: 991px) {
  .post-main-image-wrapper-header {
    margin-left: -30px;
    margin-right: -30px;
  }

  .post-main-image-wrapper-header figcaption {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* post.css rules off the nav above the title; the image separates them now. */
  .hero-content .section-padding-top {
    padding-top: 0;
    border-top: none;
  }
}

@media (max-width: 479px) {
  .post-main-image-wrapper-header {
    margin-left: -18px;
    margin-right: -18px;
  }

  .post-main-image-wrapper-header figcaption {
    padding-left: 18px;
    padding-right: 18px;
  }
}