/* ==========================================================
   Titan media row - image fills the row height
   ----------------------------------------------------------
   WHY THIS FILE EXISTS
   Divi 5 can set align-items on the row and object-fit on the
   image, but it cannot give the image WRAPPER a height, and a
   percentage height on an <img> only resolves if every box
   above it has a definite height. That chain (column -> module
   -> wrap -> img) is the one thing that has to live in CSS.

   NOTHING IN HERE IS A COLOUR, SIZE OR SPACING VALUE. It is
   layout mechanics only. Crop position, image choice, padding
   and every colour stay in Divi.

   APPLIES TO
   Any row given the CSS class "titan-media-row"
   (Divi > row > Advanced > CSS Class).
   ========================================================== */

.titan-media-row .et_pb_column {
  display: flex;
  flex-direction: column;
}

/* The text block grows to fill the column, so there is no strip of
   column background above or below it. Its own content is centred
   inside that full-height box instead. */
.titan-media-row .et_pb_blurb,
.titan-media-row .et_pb_text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0;
}

.titan-media-row .et_pb_button_module_wrapper {
  flex: 0 0 auto;
}

.titan-media-row .et_pb_image {
  flex: 1 1 auto;
  height: 100%;
  margin-bottom: 0;
}

.titan-media-row .et_pb_image .et_pb_image_wrap {
  display: block;
  height: 100%;
}

.titan-media-row .et_pb_image .et_pb_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Below the tablet breakpoint the columns stack, so a stretched
   image would have nothing to match. Return it to its natural
   proportions and stop the crop. */
@media (max-width: 980px) {
  .titan-media-row .et_pb_column {
    display: block;
  }

  .titan-media-row .et_pb_image,
  .titan-media-row .et_pb_image .et_pb_image_wrap {
    height: auto;
  }

  .titan-media-row .et_pb_image .et_pb_image_wrap img {
    height: auto;
    object-fit: fill;
  }
}