:root {
  --flexbox--justify_content: space-between;
  --flexbox--vertical_align: stretch;
}
/* Main styling */
.oxfcms-flexbox-container {
  .oxfcms-flex-items {
    justify-content: var(--flexbox--justify_content);
    align-items: var(--flexbox--vertical_align);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    /* Force min-widths on Quote & Cards */
    & > .paragraph--type--oxfcms-quotation {
      min-width: 180px;
    }
    & > .paragraph--type--oxfcms-layout-card {
      min-width: 250px;
    }
  }

  /* Flexible grid vertical align classes */
  .oxfcms-flex-align-center{
    align-self: center;
  }
  .oxfcms-flex-align-top{
    align-self: flex-start;
  }
  .oxfcms-flex-align-bottom{
    align-self: flex-end;
  }
  .oxfcms-flex-align-stretch{
    align-self: stretch;
  }
}

/* Allow images to stack by fitting their content width */
.oxfcms-flexbox-container .oxfcms-flex-items > .paragraph.paragraph--type--oxfcms-image.oxfcms-image {
  display: inline-block !important;
  width: auto !important;
  max-width: 100%;
}

.oxfcms-flexbox-container .oxfcms-flex-items > .paragraph.paragraph--type--oxfcms-image.oxfcms-image .oxfcms-image-wrapper {
  width: auto;
  max-width: 100%;
  display: inline-block;
}

.oxfcms-flexbox-container .oxfcms-flex-items > .paragraph.paragraph--type--oxfcms-image.oxfcms-image .oxfcms-image-link {
  width: auto;
  max-width: 100%;
  display: inline-block;
}

/* Removed width: auto and height: auto to respect image dimensions set via HTML attributes */
.oxfcms-flexbox-container .oxfcms-flex-items > .paragraph.paragraph--type--oxfcms-image.oxfcms-image img {
  max-width: 100%;
  height: auto;
}

/* Edit mode fixes - prevent auto margins from breaking flex alignment */
.is-mercury-edit-mode,
.lp-builder {
  .oxfcms-flexbox-container .oxfcms-flex-items > .js-lpb-component {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .oxfcms-flexbox-container .oxfcms-flex-items .lpb-controls {
    min-width: 220px;
  }
}