/*
 * Layout fixes on top of the Webflow stylesheet (site.css).
 * These bugs already existed on the Webflow site; site.css is left untouched
 * so these overrides are easy to review or remove.
 */

/*
 * 1. "width: 100%" plus side margins makes an element wider than its container,
 *    so it is pushed right and overflows. Subtract the margins from the width.
 */
.hero_image-div,
.div-block-204 {
  width: calc(100% - 2 * var(--column-width--1));
}

@media screen and (max-width: 991px) {
  .hero_image-div {
    width: calc(100% - 2 * var(--sizes--1rem));
  }
}

@media screen and (max-width: 479px) {
  /* Webflow centres the hero with auto margins here, so full width is correct. */
  .hero_image-div {
    width: 100%;
  }

  .subcontain_right_content-div,
  .subcontain_text-over-image-div {
    width: calc(100% - 2 * var(--sizes--0-5rem));
  }

  /* 404 page: a 90vw box inside a padded container overflowed on phones. */
  .div-block-127,
  .div-block-127-copy {
    max-width: 100%;
  }
}

/*
 * 2. Image cards in a row (hotel-booking: Affinity Diagram, Customer Journey Map, ...)
 *    were sized by their lazy-loaded images, so they collapsed into tiny circles with
 *    overlapping titles until the images arrived. Give each card an equal share instead.
 */
@media screen and (min-width: 480px) {
  .subcontain_right_content-div:not(.mission-log) > .link-block-div {
    flex: 1 1 0;
    min-width: 0;
  }
}