/* =================================================================
List and Image
================================================================= */
.list-and-image-2-column-wrapper {
  width: 100%;
}
.list-and-image-2-column {
  padding: 4.5rem 1.5rem;
  margin: 0 auto;
  max-width: 75rem;
}
@media only screen and (min-width: 56.25em) {
  .list-and-image-2-column {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .list-and-image-2-column.row-reverse {
    flex-direction: row-reverse;
  }
}
.list-and-image-2-column .center-text {
  text-align: center;
}
.list-and-image-2-column a {
  color: #1B4695;
  text-decoration: underline;
}
@media only screen and (min-width: 56.25em) {
    .list-and-image-2-column a:hover,
    .list-and-image-2-column a:focus {
        color: #2a6496;
        text-decoration: underline;
    }
}
.list-and-image-2-column sup {
  font-size: 0.6875rem;
  font-weight: 400;
  top: -1.5em;
}
.list-and-image-2-column sup a {
  font-size: 0.6875rem;
  font-weight: 400;
  text-decoration: underline;
  color: #1b4695;
}
.list-and-image-2-column sup a:hover,
.list-and-image-2-column sup a:focus {
  text-decoration: underline;
  color: #1b4695;
  cursor: pointer;
}
/* ===============================
Font Options
================================== */
/* Typography (font-size/weight/line-height/font-family) is owned entirely by
   the CS-F1 Typography Foundation in _typography.less:
     .second-headline → same token scale as h2 (title-1)
     .third-headline  → same token scale as h3 (title-2)
   This component only owns structural spacing and the color variable. */
.list-and-image-2-column .second-headline {
  padding: 0;
  margin-bottom: 1.5rem;
}
/* Serif */
.list-and-image-2-column .second-headline--serif {
  --list-image-title-font-family: "Chronicle", "Times New Roman", Times, serif;
}
/* ===============================
Font Size Options
================================== */
/* Large */
.list-and-image-2-column .second-headline--lg {
  --list-image-title-font-size: 2.625rem;
}
/* Medium */
.list-and-image-2-column .second-headline--md {
  --list-image-title-font-size: 2rem;
}

/*.list-and-image-2-column .image-wrapper {
  margin: 0 auto;
}*/
@media only screen and (min-width: 37.5em) {
  .list-and-image-2-column .image-wrapper {
    width: 75%;
  }
}
@media only screen and (min-width: 56.25em) {
  .list-and-image-2-column .image-wrapper {
      flex: 0 0 48%;
      margin: 0;
      align-self: flex-start;
  }
}
@media only screen and (min-width: 56.25em) {
    .list-and-image-2-column .copy-wrapper {
        flex: 0 0 45%;
    }
}
.list-and-image-2-column .list {
  list-style-type: disc;
  margin-left: 1.875rem;
}
.list-and-image-2-column .list-item {
  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  margin: 0 0 1.5rem;
}
.list-and-image-2-column .list .list-item {
  padding-left: 0.875rem;
  margin-bottom: 1.5rem;
}
.list-and-image-2-column .list .list-item a,
.list-and-image-2-column .list .list-item a:hover,
.list-and-image-2-column .list .list-item a:focus {
  text-decoration: underline;
}
.list-and-image-2-column .list .list-item sup a {
  font-size: 0.75rem;
  top: -0.75em;
  font-weight: 400;
  text-decoration: underline;
}
/* ===============================
Title Color
================================== */
/* CSS-VARIABLE APPROACH: one "reader" rule below supplies `color` for the
   heading and its nested <a>/<sup> — the custom property set by whichever
   modifier class is present is inherited down to those descendants
   automatically, so each modifier only needs to set the variable ONCE, on
   the heading itself, instead of three duplicated color declarations.
   consumer-theme.less supplies its own default by setting this same variable
   at the wrapper (ancestor) level; a modifier here always wins over that
   ancestor default because a direct match always beats an inherited value,
   regardless of specificity or clientlib load order — no compound classes or
   !important needed anywhere in this chain. */
.list-and-image-2-column .second-headline,
.list-and-image-2-column .second-headline a,
.list-and-image-2-column .second-headline sup {
  color: var(--list-image-title-color, #1b4695);
}
.list-and-image-2-column .second-headline--white     { --list-image-title-color: #fff; }
.list-and-image-2-column .second-headline--dark-gray { --list-image-title-color: #444; }
.list-and-image-2-column .second-headline--black     { --list-image-title-color: #000; }
.list-and-image-2-column .second-headline--topaz     { --list-image-title-color: #67B2E8; }
.list-and-image-2-column .second-headline--azurite   { --list-image-title-color: #1775BB; }
.list-and-image-2-column .second-headline--lapis     { --list-image-title-color: #1C2758; }
.list-and-image-2-column .second-headline--citrine   { --list-image-title-color: #FEC824; }
/* ===============================
Copy Color
================================== */
/* .paragraph-copy is a <div> (see list-and-image-2-column.html) specifically so the
   ./tagLine RTE can emit multiple <p> tags for multi-paragraph content without an
   invalid <p>-in-<p> nesting. Single-paragraph content (the common case) has no
   wrapping <p> at all — the RTE's own removeSingleParagraphContainer dialog setting
   already strips it — so "* p" below only ever matches real multi-paragraph entries.

   IMPORTANT: every property below is declared on BOTH ".paragraph-copy" and
   ".paragraph-copy p" explicitly, rather than relying on inheritance from the outer
   div down to the inner <p>. The shared CS-F1 Typography Foundation
   (_typography.less) declares a bare `p { font-size; line-height; font-weight; color }`
   rule for every themed page — that rule is a DIRECT match on the RTE's inner <p>,
   which always wins over an INHERITED value from ".paragraph-copy", regardless of
   specificity. Explicitly re-targeting ".paragraph-copy p" makes this rule a direct
   match too (and a MORE specific one, 2 classes + tag vs. CS-F1's 1 class + tag),
   so color/font/line-height/margin correctly reach the RTE's own paragraphs instead
   of being silently overridden by that base typography rule. */
.list-and-image-2-column .paragraph-copy {
  --cmp-paragraph-copy-font-family: "Open Sans", "Arial", sans-serif;
  --cmp-paragraph-copy-font-size: 1rem;
  --cmp-paragraph-copy-line-height: 1.6;
  --cmp-paragraph-copy-font-weight: 400;
  --cmp-paragraph-copy-color: var(--list-image-copy-color, #333);
  padding: 0;
}

.list-and-image-2-column .paragraph-copy,
.list-and-image-2-column .paragraph-copy p {
  font-family: var(--cmp-paragraph-copy-font-family, "Open Sans", "Arial", sans-serif);
  font-size: var(--cmp-paragraph-copy-font-size, 1rem);
  line-height: var(--cmp-paragraph-copy-line-height, 1.6);
  font-weight: var(--cmp-paragraph-copy-font-weight, 400);
}
.list-and-image-2-column .paragraph-copy {
  margin: 0 0 1.5rem;
}
.list-and-image-2-column .paragraph-copy,
.list-and-image-2-column .paragraph-copy p,
.list-and-image-2-column .paragraph-copy a,
.list-and-image-2-column .paragraph-copy sup {
  color: var(--cmp-paragraph-copy-color, var(--list-image-copy-color, #333));
}
.list-and-image-2-column .paragraph-copy--dark-gray { --list-image-copy-color: #444; }
.list-and-image-2-column .paragraph-copy--ftblue    { --list-image-copy-color: #1b4695; }
.list-and-image-2-column .paragraph-copy--white     { --list-image-copy-color: #fff; }
.list-and-image-2-column .paragraph-copy--topaz     { --list-image-copy-color: #67B2E8; }
.list-and-image-2-column .paragraph-copy--azurite   { --list-image-copy-color: #1775BB; }
.list-and-image-2-column .paragraph-copy--lapis     { --list-image-copy-color: #1C2758; }
.list-and-image-2-column .paragraph-copy p {
  margin: 0 0 1rem;
}
.list-and-image-2-column .paragraph-copy p:last-child {
  margin-bottom: 0;
}
.list-and-image-2-column .paragraph-copy--dark-gray a,
.list-and-image-2-column .paragraph-copy--ftblue a,
.list-and-image-2-column .paragraph-copy--white a,
.list-and-image-2-column .paragraph-copy--topaz a,
.list-and-image-2-column .paragraph-copy--azurite a,
.list-and-image-2-column .paragraph-copy--lapis a {
  text-decoration: underline;
}
/* ===============================
List Color
================================== */
.list-and-image-2-column .list-item {
  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  margin: 0 0 1.5rem;
}
.list-and-image-2-column .list-item,
.list-and-image-2-column .list-item a,
.list-and-image-2-column .list-item sup a {
  color: var(--list-image-list-color, #333);
}
.list-and-image-2-column .list-item--white   { --list-image-list-color: #fff; }
.list-and-image-2-column .list-item--gray    { --list-image-list-color: #54565a; }
.list-and-image-2-column .list-item--black   { --list-image-list-color: #444; }
.list-and-image-2-column .list-item--ftblue  { --list-image-list-color: #1b4695; }
.list-and-image-2-column .list-item--topaz   { --list-image-list-color: #67B2E8; }
.list-and-image-2-column .list-item--azurite { --list-image-list-color: #1775BB; }
.list-and-image-2-column .list-item--lapis   { --list-image-list-color: #1C2758; }
/* ===============================
CTA Color
================================== */
/* CSS-VARIABLE APPROACH: ".list-and-image-cta-button" (always present) is the
   ONLY rule that ever sets background-color/color/border directly — every
   "primary-button--*" modifier below just sets the matching variables on its
   own single-class selector, no longer needs to duplicate literal colors
   across a base + :hover/:focus pair. Fallbacks match the old (dead/
   unreachable via this component's dialog) ".primary-button" bare default,
   so a CTA with no buttonColor selected now gets a sane look instead of
   rendering unstyled — a minor, intentional improvement, not a regression.
   consumer-theme.less supplies the CD1 pill default the same way, by setting
   these variables at the wrapper (ancestor) level; any "primary-button--*"
   pick here still always wins, since a direct match on the button itself
   always beats an inherited ancestor value. */
.list-and-image-2-column .list-and-image-cta-button {
  display: inline-block;
  font-size: 1.25rem;
  text-align: center;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  padding: 0.9375rem 2.75rem;
  transition: background-color 0.15s ease-in-out, border 0.15s ease-in-out;
  background-color: var(--list-image-cta-bg, #1c2758);
  color: var(--list-image-cta-color, #fff);
  border: 0.125rem solid var(--list-image-cta-border, #1c2758);
}
@media only screen and (min-width: 64em) {
  .list-and-image-2-column .list-and-image-cta-button:hover,
  .list-and-image-2-column .list-and-image-cta-button:focus {
    text-decoration: none;
    background-color: var(--list-image-cta-bg-hover, #1b4695);
    border-color: var(--list-image-cta-border-hover, #1b4695);
    color: var(--list-image-cta-color-hover, var(--list-image-cta-color, #fff));
  }
}
/* FT Blue */
.list-and-image-2-column .primary-button--ftblue {
  --list-image-cta-bg: #1B4695;
  --list-image-cta-color: #fff;
  --list-image-cta-border: #1B4695;
  --list-image-cta-bg-hover: var(--ft-btn-hover-bg, #2054b3);
  --list-image-cta-border-hover: var(--ft-btn-hover-border-color, #2054b3);
}
/* FT Green */
.list-and-image-2-column .primary-button--ftgreen {
  --list-image-cta-bg: #08aa66;
  --list-image-cta-color: #fff;
  --list-image-cta-border: #08aa66;
  --list-image-cta-bg-hover: var(--ft-btn-hover-bg, #00804a);
  --list-image-cta-border-hover: var(--ft-btn-hover-border-color, #00804a);
}
/* Topaz */
.list-and-image-2-column .primary-button--topaz {
  --list-image-cta-bg: #67B2E8;
  --list-image-cta-color: #000;
  --list-image-cta-border: #67B2E8;
  --list-image-cta-bg-hover: var(--ft-btn-hover-bg, #65a1ce);
  --list-image-cta-border-hover: var(--ft-btn-hover-border-color, #65a1ce);
}
/* Azurite */
.list-and-image-2-column .primary-button--azurite {
  --list-image-cta-bg: #1775BB;
  --list-image-cta-color: #fff;
  --list-image-cta-border: #1775BB;
  --list-image-cta-bg-hover: var(--ft-btn-hover-bg, #13619a);
  --list-image-cta-border-hover: var(--ft-btn-hover-border-color, #13619a);
}
/* Ghost */
.list-and-image-2-column .primary-button--ghost {
  --list-image-cta-bg: transparent;
  --list-image-cta-color: #fff;
  --list-image-cta-border: #fff;
  --list-image-cta-bg-hover: var(--ft-btn-hover-bg, #fff);
  --list-image-cta-border-hover: var(--ft-btn-hover-border-color, #fff);
  --list-image-cta-color-hover: var(--ft-btn-hover-text-color, #1B4695);
}
/* Ghost (Lapis) */
.list-and-image-2-column .primary-button--ghost-lapis {
  --list-image-cta-bg: transparent;
  --list-image-cta-color: #1C2758;
  --list-image-cta-border: #1C2758;
  --list-image-cta-bg-hover: var(--ft-btn-hover-bg, #54565a);
  --list-image-cta-border-hover: var(--ft-btn-hover-border-color, #54565a);
  --list-image-cta-color-hover: var(--ft-btn-hover-text-color, #fff);
}
/* Ghost (FT Blue) */
.list-and-image-2-column .primary-button--ghost-ftblue {
  --list-image-cta-bg: transparent;
  --list-image-cta-color: #1B4695;
  --list-image-cta-border: #1B4695;
  --list-image-cta-bg-hover: var(--ft-btn-hover-bg, #1B4695);
  --list-image-cta-border-hover: var(--ft-btn-hover-border-color, #1B4695);
  --list-image-cta-color-hover: var(--ft-btn-hover-text-color, #fff);
}
/* Lapis */
.list-and-image-2-column .primary-button--lapis {
  --list-image-cta-bg: #1C2758;
  --list-image-cta-color: #fff;
  --list-image-cta-border: #1C2758;
  --list-image-cta-bg-hover: var(--ft-btn-hover-bg, #1B4695);
  --list-image-cta-border-hover: var(--ft-btn-hover-border-color, #1B4695);
}
/* Lapis (WAM) */
.list-and-image-2-column .primary-button--lapis-wam {
  --list-image-cta-bg: #1C2758;
  --list-image-cta-color: #fff;
  --list-image-cta-border: #1C2758;
  --list-image-cta-bg-hover: var(--ft-btn-hover-bg, #54565a);
  --list-image-cta-border-hover: var(--ft-btn-hover-border-color, #54565a);
}

/* ===============================
Button Type
================================== */
.list-and-image-2-column .list-and-image-cta-button--rounded-corners,
 .list-and-image-2-column .list-and-image-cta-button--rounded {
    border-radius: 0.375rem;
}
.list-and-image-2-column .list-and-image-cta-button--rounded-button {
    border-radius: 1.5em;
}
/* ============================
Background Color Options
=============================== */
/* Default */
.list-and-image-2-column-wrapper.section-background-blue {
  background-color: #eef7fe;
}
.list-and-image-2-column-wrapper.section-background-white {
  background-color: #fff;
}
/* SPECIFICITY (was !important, all variants below): compounded with the
   always-present ".checking-components" class (see list-and-image-2-column.html)
   to reliably beat the 2-class hardcoded defaults
   ".list-and-image-2-column-wrapper.section-background-blue/-white" above,
   without depending on source order. Only ".section-background--ltgray" is
   ever touched by consumer-theme.less, so no other cross-file tie exists for
   the variants below. */
/* Gray */
.list-and-image-2-column-wrapper.checking-components.section-background--gray {
  background-color: #f1f1f1;
}
/* Dark Gray */
.list-and-image-2-column-wrapper.checking-components.section-background--dark-gray {
  background-color: #444;
}
/* LT Blue */
.list-and-image-2-column-wrapper.checking-components.section-background--ltblue {
  background-color: #eef7fe;
}
/* FT Blue */
.list-and-image-2-column-wrapper.checking-components.section-background--ftblue {
  background-color: #1B4695;
}
/* White */
.list-and-image-2-column-wrapper.checking-components.section-background--white {
  background-color: #fff;
}
/* Topaz */
.list-and-image-2-column-wrapper.checking-components.section-background--topaz {
  background-color: #67B2E8;
}
/* Azurite */
.list-and-image-2-column-wrapper.checking-components.section-background--azurite {
  background-color: #1775BB;
}
/* Lapis */
.list-and-image-2-column-wrapper.checking-components.section-background--lapis {
  background-color: #1C2758;
}
/* Blue-Green Gradient */
.list-and-image-2-column-wrapper.checking-components.section-background--blue-green-gradient {
    background: linear-gradient(90deg, rgba(27,70,149,1) 0%, rgba(23,117,187,1) 35%, rgba(8,170,102,1)100%);
}
/* Blue-Blue Gradient */
.list-and-image-2-column-wrapper.checking-components.section-background--blue-blue-gradient {
  background: linear-gradient(90deg, rgba(14,95,206,1) 0%, rgba(14,95,206,1) 35%, rgba(87,181,248,1) 100%);
}

.list-and-image-2-column .button-wrapper {
  margin-top: 2.5rem;
  margin-bottom: 0;
}
@media only screen and (max-width: 27em) {
    .list-and-image-2-column .button-wrapper {
        padding-bottom: 3rem;
    }  
}

/* =================================================================
Themes
================================================================= */
.momentum .list-and-image-2-column {
    max-width: 900pt;
}
@media only screen and (min-width: 1025px) {
    .list-and-image .momentum.list-and-image-2-column-wrapper .list-and-image-2-column {
        padding: 4.5rem 0 2.25rem;
        justify-content: space-between;
    }
    .list-and-image:not(:first-child) ~ .list-and-image .momentum.list-and-image-2-column-wrapper .list-and-image-2-column {
        padding: 2.25rem 0;
    }
    .list-and-image:nth-last-child(1 of .list-and-image) .momentum.list-and-image-2-column-wrapper .list-and-image-2-column {
        padding: 2.25rem 0 4.5rem;
    }
    .momentum .list-and-image-2-column .list-and-image-cta-button--rounded-button {
        padding: 1rem 2.5rem;
    }
    .momentum .list-and-image-2-column .second-headline {
        max-width: 85%;
    }
}
@media only screen and (max-width: 1023px) {
    .momentum.list-and-image-2-column-wrapper .list-and-image-2-column {
        padding: 3rem 1.5rem;
    }
    .momentum .list-and-image-2-column .list-and-image-cta-button {
        width: 100%;
    }
    .momentum .list-and-image-2-column .list-and-image-cta-button--rounded-button {
        padding: 1rem 2rem;
    }
}
@media only screen and (max-width: 767px) {
    .momentum.list-and-image-2-column-wrapper .list-and-image-2-column {
        padding: 2rem 1.5rem;
    }
    .momentum.list-and-image-2-column-wrapper .list-and-image-2-column .image-wrapper {
        margin-top: 3rem;
    }
}
@media only screen and (max-width: 27em) {
    .momentum.list-and-image-2-column-wrapper .list-and-image-2-column .button-wrapper {
        padding-bottom: 0;
    }
    .momentum .list-and-image-2-column .second-headline {
        text-align: center;
    }
}
.momentum .list-and-image-2-column .second-headline {
    color: var(--brand-primary-opal);
    font-size: 2.15rem;
    font-weight: 700;
}
@media only screen and (min-width: 56.25em) {
    .momentum .list-and-image-2-column .copy-wrapper {
        flex: 0 0 43%;
    }
}
/* The two rules below (> p, and > p:not(.paragraph-copy) ~ p) were a workaround for
   the same nested-<p> defect fixed in list-and-image-2-column.html: when the
   ./tagLine RTE emitted multiple <p> tags, the browser used to auto-close the
   wrapping <p class="paragraph-copy"> early, leaving those RTE paragraphs as bare,
   unstyled DIRECT children of .copy-wrapper. Now that the wrapper is a <div>, the
   RTE's <p> tags nest correctly INSIDE .paragraph-copy instead, so these two
   selectors no longer match anything — left in place as inert/vestigial rather
   than removed, since deleting momentum-theme CSS isn't otherwise in scope here. */
.momentum .list-and-image-2-column .copy-wrapper > p {
    padding: 0;
}
.momentum .list-and-image-2-column .copy-wrapper > p:not(.paragraph-copy) ~ p {
    padding: 1rem 0 0 0;
}
.momentum .list-and-image-2-column .copy-wrapper > .paragraph-copy {
    /* SPECIFICITY (was !important): not needed — already (0,4,1), well above
       the 2-class ".paragraph-copy" default it overrides, and momentum pages
       never load consumer-theme.less (pageTheme is mutually exclusive), so
       there's no cross-file tie to defend against either. Selector changed
       from "p.paragraph-copy" to ".paragraph-copy": the wrapper is now a
       <div> (see list-and-image-2-column.html), so the old tag-qualified
       selector would silently stop matching at all. */
    margin: 0;
}
.momentum .list-and-image-2-column .copy-wrapper p:empty,
.momentum .list-and-image-2-column .copy-wrapper .paragraph-copy:empty {
    display: none;
}
.momentum .list-and-image-2-column .list-and-image-cta-button--rounded-button {
    border-radius: 2rem;
}
@media only screen and (max-width: 1023px) {
    .list-and-image .momentum.list-and-image-2-column-wrapper .list-and-image-2-column {
        padding: 2rem 1.5rem 1rem;
    }
    .list-and-image:not(:first-child) ~ .list-and-image .momentum.list-and-image-2-column-wrapper .list-and-image-2-column {
        padding: 2rem 1.5rem;
    }
    .list-and-image:nth-last-child(1 of .list-and-image) .momentum.list-and-image-2-column-wrapper .list-and-image-2-column {
        padding: 1rem 1.5rem 2rem;
    }
    .momentum.list-and-image-2-column-wrapper .list-and-image-2-column .copy-wrapper {
        margin-bottom: 1.5rem;
    }
    .momentum.list-and-image-2-column-wrapper .list-and-image-2-column .image-wrapper {
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    .momentum.list-and-image-2-column-wrapper .list-and-image-2-column .button-wrapper {
        margin-top: 1rem;
        margin-bottom: 0;
    }
    .momentum.c-content-block-btn .c-text-block img {
        max-width: 50%;
    }
}

/* List and Image 2 Col - Split List */
.list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .copy-wrapper {
    flex: 0 0 43%;
}
.list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column {
    padding: 4.5rem 1.5rem 0;
}
.list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .list .list-item sup {
    font-size: 0.6875rem;
    font-weight: 400;
    top: -0.75em;
}
.list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .list {
    list-style: none;
    padding-left: 0;
}
.list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .list .list-item {
    position: relative;
    padding-left: 3.5rem;  /* space to preserve indentation on wrap */
}
.list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .list .list-item:before {
    content: '';  /* placeholder for the SVG */
    position: absolute;
    left: 0;  /* place the SVG at the start of the padding */
    width: 2.5rem;
    height: 2.5rem;
    background: url('../../../../../content/dam/fifth-third/momentum/icons/icon-checkmark.svg') no-repeat;
}
@media only screen and (min-width: 56.25em) {
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -moz-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: flex-end;
    }
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .list {
        -moz-column-count: 2;
        -moz-column-gap: 500px;
        -webkit-column-count: 2;
        -webkit-column-gap: 500px;
        column-count: 2;
        column-gap: 500px;
        min-height: 250px;
    }
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .list li {
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside:avoid;
        -moz-page-break-inside:avoid;
        page-break-inside: avoid;
        break-inside: avoid-column;
    }
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column {
        position: relative;
    }
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .copy-wrapper {
        flex: 0 0 100%;
        margin-bottom: 2rem;
    }
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list.u-font-large .list-and-image-2-column .second-headline {
        width: 70%;
        text-align: center;
        margin: 0 auto 10rem;
        font-size: 2.5rem;
        line-height: 1.2;
    }
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .image-wrapper {
        margin: 0 auto;
        position: absolute;
        flex: 0 0 100%;
        width: auto;
        text-align: center;
        z-index: 9;
        font-size: 0;
    }
}
@media only screen and (min-width: 37.5em) {
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .image-wrapper {
        font-size: 0;
    }
}
@media only screen and (max-width: 27em) {
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .image-wrapper {
        font-size: 0;
        bottom: 5px;
        position: relative;
    }
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .list {
        margin-left: 0;
    }
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column {
        padding: 1.5rem 1rem 0;
        margin-bottom: -0.35rem;
    }
}
@media only screen and (min-width: 851px) and (max-width: 920px) {
    /* SPECIFICITY (was !important): not needed — already (0,5,0), the most
       specific selector in this file; nothing else can tie with it. */
    .list-and-image-2-column-wrapper.momentum.list-and-image-2-column--split-list .list-and-image-2-column .list {
        column-gap: 440px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .momentum .list-and-image-2-column .second-headline {
        text-align: center;
    }
}