/*
 * Individual Civic Mission pages use their featured image as a small visual
 * identifier, not as a full-width hero image. The !important declarations are
 * intentional so block-theme global styles cannot stretch it back out.
 */
body.single-civic_mission .wp-block-post-featured-image,
body.single-civic_mission figure.wp-block-post-featured-image,
body.single-civic_mission .post-thumbnail {
  width: clamp(120px, 14vw, 180px) !important;
  max-width: 180px !important;
  margin: 1rem auto 1.5rem !important;
}

body.single-civic_mission .wp-block-post-featured-image img,
body.single-civic_mission figure.wp-block-post-featured-image img,
body.single-civic_mission .post-thumbnail img {
  display: block !important;
  width: 100% !important;
  max-width: 180px !important;
  height: auto !important;
  max-height: 180px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

/* Classic-theme featured-image wrappers sometimes expose a link as the
 * element that inherits the theme's wide sizing. Keep that compact too. */
body.single-civic_mission .wp-block-post-featured-image > a,
body.single-civic_mission .post-thumbnail > a {
  display: block !important;
  width: 100% !important;
  max-width: 180px !important;
  margin: 0 auto !important;
}

@media (max-width: 600px) {
  body.single-civic_mission .wp-block-post-featured-image,
  body.single-civic_mission figure.wp-block-post-featured-image,
  body.single-civic_mission .post-thumbnail {
    width: 120px !important;
    max-width: 120px !important;
    margin-top: .75rem !important;
    margin-bottom: 1rem !important;
  }

  body.single-civic_mission .wp-block-post-featured-image img,
  body.single-civic_mission figure.wp-block-post-featured-image img,
  body.single-civic_mission .post-thumbnail img,
  body.single-civic_mission .wp-block-post-featured-image > a,
  body.single-civic_mission .post-thumbnail > a {
    max-width: 120px !important;
    max-height: 120px !important;
  }
}