/* =====================================
   IMAGE AND CONTENT RESPONSIVE FIX

   Preserves the original overlap while
   keeping the entire layout and all text
   within the available module width.
   ===================================== */

.imageAndContentModule,
.imageAndContentModule * {
  box-sizing: border-box;
}


/* =====================================
   TWO-COLUMN LAYOUT
   ===================================== */

.imageAndContentModule
  .imageAndContentColumnWrapper {
  display: flex !important;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* Image uses 52% */

.imageAndContentModule
  .imageAndContentImageColumn {
  flex: 0 1 52% !important;
  width: 52% !important;
  max0 1 52% !important;
  width: 52% !important;
  max-width: 52% !important;
  min-width: 0 !important;
}


/*
 * The white card uses the remaining 48%
 * plus the 40px that visually overlaps
 * the image.
 *
 * Effective width:
 * 52% + 48% + 40px - 40px = 100%
 */

.imageAndContentModule
  .imageAndContentContentColumn {
  flex: 0 1 calc(48% + 40px) !important;
  width: calc(48% + 40px) !important;
  max-width: calc(48% + 40px) !important;
  min-width: 0 !important;
  height: auto !important;
  margin-left: -40px !important;
}


/* =====================================
   IMAGE CONTAINMENT
   ===================================== */

.imageAndContentModule
  .imageAndContentImage,
.imageAndContentModule
  .imageAndContentImage > *,
.imageAndContentModule
  .imageAndContentImage
  .hs_cos_wrapper,
.imageAndContentModule
  .imageAndContentImage
  .hs_cos_wrapper_type_linked_image {
  display: block;
  width: 100%;
  max-width: 100%;
}

.imageAndContentModule
  .imageAndContentImageColumn img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
}


/* =====================================
   WHITE CARD CONTENT CONTAINMENT
   ===================================== */

.imageAndContentModule
  .imageAndContentContentColumn > *,
.imageAndContentModule
  .imageAndContentContentColumn
  .tagHeading,
.imageAndContentModule
  .imageAndContentDetails,
.imageAndContentModule
  .imageAndContentName,
.imageAndContentModule
  .imageAndContentButton {
  position: static !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-right: 0;
  margin-left: 0;
  float: none !important;
  transform: none !important;
}


/*
 * HubSpot rich text may output paragraphs,
 * divs, or spans. Constrain every direct
 * rich-text child to the card width.
 */

.imageAndContentModule
  .imageAndContentDetails > *,
.imageAndContentModule
  .imageAndContentName > * {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}


/* Force normal wrapping on all content */

.imageAndContentModule
  .imageAndContentDetails,
.imageAndContentModule
  .imageAndContentDetails *,
.imageAndContentModule
  .imageAndContentName,
.imageAndContentModule
  .imageAndContentName *,
.imageAndContentModule
  .imageAndContentContentColumn h1,
.imageAndContentModule
  .imageAndContentContentColumn h2,
.imageAndContentModule
  .imageAndContentContentColumn h3,
.imageAndContentModule
  .imageAndContentContentColumn h4,
.imageAndContentModule
  .imageAndContentContentColumn h5,
.imageAndContentModule
  .imageAndContentContentColumn h6,
.imageAndContentModule
  .imageAndContentContentColumn p,
.imageAndContentModule
  .imageAndContentContentColumn li,
.imageAndContentModule
  .imageAndContentContentColumn span {
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: none !important;
}


/* Keep attribution inside and right-aligned */

.imageAndContentModule
  .imageAndContentName {
  text-align: right !important;
}


/* Prevent links or URLs from escaping */

.imageAndContentModule
  .imageAndContentContentColumn a {
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}


/* =====================================
   MOBILE
   ===================================== */

@media (max-width: 767px) {
  .imageAndContentModule
    .imageAndContentColumnWrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .imageAndContentModule
    .imageAndContentImageColumn,
  .imageAndContentModule
    .imageAndContentContentColumn {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .imageAndContentModule
    .imageAndContentContentColumn {
    margin-top: 20px !important;
    margin-left: 0 !important;
    padding: 30px 20px !important;
  }
}