/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/org_marykay/cartridge/client/default/scss/experience/components/commerce_assets/pxpBeforeAndAfter.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable no-descending-specificity */
.pxp-before-and-after {
  background: #FFF;
  width: 100%;
}
.pxp-before-and-after__container {
  padding: 3rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.pxp-before-and-after__container > * + * {
  margin-top: 3rem;
}
.mobile-2r-1c-with-title-footer .pxp-before-and-after__container {
  padding: 0;
}
.mobile-2r-1c-with-title-footer .pxp-before-and-after__container > * + * {
  margin-top: 1.5rem;
}
.pxp-before-and-after__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-size: 1rem;
  padding: 0;
  width: 100%;
  gap: 0;
}
.pxp-before-and-after__before {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0;
  gap: 16px;
}
.pxp-before-and-after__before-subheading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  width: 100%;
}
.pxp-before-and-after__before-subheading-text {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 21.6px;
  line-height: 120%;
  color: #3F2A56;
  margin: 0;
  letter-spacing: 0.03em;
  text-align: left;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media (width >= 768px) {
  .pxp-before-and-after__before-subheading-text {
    font-size: 24px;
  }
}
.pxp-before-and-after__before-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 3/4;
}
@media (width < 1440px) {
  .pxp-before-and-after__before-image {
    max-height: 470px;
  }
}
.pxp-before-and-after__before-image-picture {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.pxp-before-and-after__before-image-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pxp-before-and-after__before-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  width: 100%;
}
.pxp-before-and-after__before-body-content {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #101820;
  letter-spacing: 0.03em;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.pxp-before-and-after__before-body-content p {
  font-size: 14px;
  margin: 0 0 8px;
  line-height: 150%;
  padding-right: 16px;
}
.pxp-before-and-after__before-body-content p:last-child {
  margin-bottom: 0;
}
.pxp-before-and-after__before-body-content ul, .pxp-before-and-after__before-body-content ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.pxp-before-and-after__before-body-content ul:last-child, .pxp-before-and-after__before-body-content ol:last-child {
  margin-bottom: 0;
}
.pxp-before-and-after__before-body-content li {
  margin-bottom: 4px;
}
.pxp-before-and-after__before-body-content li:last-child {
  margin-bottom: 0;
}
.pxp-before-and-after__before-body-content strong {
  font-weight: 600;
}
.pxp-before-and-after__before-body-content em {
  font-style: italic;
}
.pxp-before-and-after__before-body-content u {
  text-decoration: underline;
}
.pxp-before-and-after__after {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0;
  gap: 16px;
}
.pxp-before-and-after__after-subheading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  width: 100%;
}
.pxp-before-and-after__after-subheading-text {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 21.6px;
  line-height: 120%;
  color: #3F2A56;
  margin: 0;
  letter-spacing: 0.03em;
  text-align: left;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media (width >= 768px) {
  .pxp-before-and-after__after-subheading-text {
    font-size: 24px;
  }
}
.pxp-before-and-after__after-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 3/4;
}
@media (width < 1440px) {
  .pxp-before-and-after__after-image {
    max-height: 470px;
  }
}
.pxp-before-and-after__after-image-picture {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.pxp-before-and-after__after-image-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pxp-before-and-after__after-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  width: 100%;
}
.pxp-before-and-after__after-body-content {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #101820;
  letter-spacing: 0.03em;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.pxp-before-and-after__after-body-content p {
  font-size: 14px;
  line-height: 150%;
  margin: 0 0 8px;
}
.pxp-before-and-after__after-body-content p:last-child {
  margin-bottom: 0;
}
.pxp-before-and-after__after-body-content ul, .pxp-before-and-after__after-body-content ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.pxp-before-and-after__after-body-content ul:last-child, .pxp-before-and-after__after-body-content ol:last-child {
  margin-bottom: 0;
}
.pxp-before-and-after__after-body-content li {
  margin-bottom: 4px;
}
.pxp-before-and-after__after-body-content li:last-child {
  margin-bottom: 0;
}
.pxp-before-and-after__after-body-content strong {
  font-weight: 600;
}
.pxp-before-and-after__after-body-content em {
  font-style: italic;
}
.pxp-before-and-after__after-body-content u {
  text-decoration: underline;
}

.region .pxp-before-and-after {
  margin-bottom: 0;
}
.region .pxp-before-and-after:not(:last-child) {
  margin-bottom: 32px;
}

/*# sourceMappingURL=pxpBeforeAndAfter.css.map*/