/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/commerceLayouts_marykay/configurableGrid.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* *** MIXINS *** */
/* ******** Set Line Clamp ******** */
.clamp {
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--1 {
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--2 {
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--3 {
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--4 {
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--5 {
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.clamp--9 {
  -webkit-line-clamp: 9;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/**
  @mixin aspect-ratio
  Use CSS aspect-ratio rule where possible, but fall back to
  padding-top hack iff needed (i.e. iOS 14)
*/
.flexible-grid-layout .legal p {
  font-size: 0.625rem ;
  font-weight: 400;
  color: #101820;
  line-height: calc(1.265rem + 0.18vw);
  letter-spacing: 0.01rem;
}
@media (min-width: 1200px) {
  .flexible-grid-layout .legal p {
    line-height: 1.4rem;
  }
}

.layout-section-title-text {
  font-size: calc(1.475rem + 2.7vw) ;
  font-weight: 300;
  color: #101820;
  line-height: calc(1.545rem + 3.54vw);
  letter-spacing: 0.1rem;
}
@media (min-width: 1200px) {
  .layout-section-title-text {
    font-size: 3.5rem ;
  }
}
@media (min-width: 1200px) {
  .layout-section-title-text {
    line-height: 4.2rem;
  }
}

.flexible-grid-layout {
  display: grid;
  container-type: inline-size;
  container-name: grid-layout;
  width: 100%;
  grid-template-columns: 1fr;
}
.flexible-grid-layout .flexible-grid-layout {
  max-height: 100%;
}
.flexible-grid-layout[data-mobile-columns="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.flexible-grid-layout.bg-snow-pink {
  background-color: #fff7fa;
}
.flexible-grid-layout[data-vertical-padding=none] {
  padding-block: 0;
}
.flexible-grid-layout[data-vertical-padding=small] {
  padding-block: 1rem;
}
.flexible-grid-layout[data-vertical-padding=medium] {
  padding-block: 1.5rem;
}
.flexible-grid-layout[data-vertical-padding=large] {
  padding-block: 3rem;
}
.flexible-grid-layout[data-side-padding=true] {
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .flexible-grid-layout[data-side-padding=true] {
    padding-inline: 1.5rem;
  }
}
.flexible-grid-layout[data-side-padding=false] {
  padding-inline: 0;
}
.flexible-grid-layout[data-grid-row-gap=none] {
  row-gap: 0;
}
.flexible-grid-layout[data-grid-row-gap=small] {
  row-gap: 1rem;
}
.flexible-grid-layout[data-grid-row-gap=medium] {
  row-gap: 1.5rem;
}
.flexible-grid-layout[data-grid-row-gap=large] {
  row-gap: 3rem;
}
.flexible-grid-layout[data-grid-column-gap=none] {
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
}
.flexible-grid-layout[data-grid-column-gap=small] {
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem;
}
.flexible-grid-layout[data-grid-column-gap=medium] {
  -webkit-column-gap: 1.5rem;
     -moz-column-gap: 1.5rem;
          column-gap: 1.5rem;
}
.flexible-grid-layout[data-grid-column-gap=large] {
  -webkit-column-gap: 3rem;
     -moz-column-gap: 3rem;
          column-gap: 3rem;
}
@media (min-width: 768px) {
  .flexible-grid-layout[data-desktop-columns="1"] {
    grid-template-columns: repeat(1, 1fr);
  }
  .flexible-grid-layout[data-desktop-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .flexible-grid-layout[data-desktop-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .flexible-grid-layout[data-desktop-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .flexible-grid-layout[data-desktop-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .flexible-grid-layout[data-desktop-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
}
.flexible-grid-layout .grid-region {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
  min-width: 0;
}
.flexible-grid-layout .grid-region > * {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.layout-section-title,
.layout-section-footnote {
  grid-column: 1/-1;
  width: 100%;
}

.layout-section-title {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  margin-bottom: 1.5rem;
}

.layout-section-footnote {
  -webkit-box-ordinal-group: 1000;
      -ms-flex-order: 999;
          order: 999;
  margin-top: 1.5rem;
}

.layout-section-title-text {
  margin-bottom: 0;
}

.flexible-grid-layout[data-layout-mode=fixed] {
  grid-template-columns: 1fr;
}
.flexible-grid-layout[data-layout-mode=fixed][data-mobile-columns="2"] {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="1"] {
    grid-template-columns: repeat(1, 1fr);
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
}

.flexible-grid-layout[data-layout-mode=auto] {
  grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width, 250px), 1fr));
}

@media (min-width: 768px) {
  /* stylelint-disable no-descending-specificity */
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="6"][data-incomplete-row-behavior=stretch] > .grid-region:nth-last-child(1 of .grid-region):nth-child(6n+1 of .grid-region) {
    grid-column: span 6;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="6"][data-incomplete-row-behavior=stretch] > .grid-region:nth-last-child(2 of .grid-region):nth-child(6n+1 of .grid-region) {
    grid-column: span 3;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="6"][data-incomplete-row-behavior=stretch] > .grid-region:nth-last-child(1 of .grid-region):nth-child(6n+2 of .grid-region) {
    grid-column: span 3;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="6"][data-incomplete-row-behavior=center] > .grid-region:nth-last-child(1 of .grid-region):nth-child(6n+1 of .grid-region) {
    grid-column: 3/span 2;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="6"][data-incomplete-row-behavior=center] > .grid-region:nth-last-child(2 of .grid-region):nth-child(6n+1 of .grid-region) {
    grid-column: 3;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="6"][data-incomplete-row-behavior=center] > .grid-region:nth-last-child(1 of .grid-region):nth-child(6n+2 of .grid-region) {
    grid-column: 4;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="5"][data-incomplete-row-behavior=stretch] > .grid-region:nth-last-child(1 of .grid-region):nth-child(5n+1 of .grid-region) {
    grid-column: span 5;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="5"][data-incomplete-row-behavior=center] > .grid-region:nth-last-child(1 of .grid-region):nth-child(5n+1 of .grid-region) {
    grid-column: 2/span 3;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="4"][data-incomplete-row-behavior=stretch] > .grid-region:nth-last-child(1 of .grid-region):nth-child(4n+1 of .grid-region) {
    grid-column: span 4;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="4"][data-incomplete-row-behavior=stretch] > .grid-region:nth-last-child(2 of .grid-region):nth-child(4n+1 of .grid-region) {
    grid-column: span 2;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="4"][data-incomplete-row-behavior=stretch] > .grid-region:nth-last-child(1 of .grid-region):nth-child(4n+2 of .grid-region) {
    grid-column: span 2;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="4"][data-incomplete-row-behavior=center] > .grid-region:nth-last-child(1 of .grid-region):nth-child(4n+1 of .grid-region) {
    grid-column: 2/span 2;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="4"][data-incomplete-row-behavior=center] > .grid-region:nth-last-child(2 of .grid-region):nth-child(4n+1 of .grid-region) {
    grid-column: 2;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="4"][data-incomplete-row-behavior=center] > .grid-region:nth-last-child(1 of .grid-region):nth-child(4n+2 of .grid-region) {
    grid-column: 3;
  }
  /* stylelint-enable no-descending-specificity */
  /* stylelint-disable no-descending-specificity */
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="3"][data-incomplete-row-behavior=stretch] > .grid-region:nth-last-child(1 of .grid-region):nth-child(3n+1 of .grid-region) {
    grid-column: span 3;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="3"][data-incomplete-row-behavior=stretch] > .grid-region:nth-last-child(2 of .grid-region):nth-child(3n+1 of .grid-region) {
    grid-column: span 2;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="3"][data-incomplete-row-behavior=stretch] > .grid-region:nth-last-child(1 of .grid-region):nth-child(3n+2 of .grid-region) {
    grid-column: span 2;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="3"][data-incomplete-row-behavior=center] > .grid-region:nth-last-child(1 of .grid-region):nth-child(3n+1 of .grid-region) {
    grid-column: 2;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="3"][data-incomplete-row-behavior=center] > .grid-region:nth-last-child(2 of .grid-region):nth-child(3n+1 of .grid-region) {
    grid-column: 1;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-desktop-columns="3"][data-incomplete-row-behavior=center] > .grid-region:nth-last-child(1 of .grid-region):nth-child(3n+2 of .grid-region) {
    grid-column: 2;
  }
  /* stylelint-enable no-descending-specificity */
  .flexible-grid-layout[data-layout-mode=fixed][data-number-of-regions="2.0"][data-desktop-columns="2"][data-two-region-layout="1-1"] {
    grid-template-columns: 1fr 1fr;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-number-of-regions="2.0"][data-desktop-columns="2"][data-two-region-layout="1-5"] {
    grid-template-columns: 1fr 5fr;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-number-of-regions="2.0"][data-desktop-columns="2"][data-two-region-layout="5-1"] {
    grid-template-columns: 5fr 1fr;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-number-of-regions="2.0"][data-desktop-columns="2"][data-two-region-layout="1-2"] {
    grid-template-columns: 1fr 2fr;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-number-of-regions="2.0"][data-desktop-columns="2"][data-two-region-layout="2-1"] {
    grid-template-columns: 2fr 1fr;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-number-of-regions="2.0"][data-desktop-columns="2"][data-two-region-layout="1-3"] {
    grid-template-columns: 1fr 3fr;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-number-of-regions="2.0"][data-desktop-columns="2"][data-two-region-layout="3-1"] {
    grid-template-columns: 3fr 1fr;
  }
}
.flexible-grid-layout:has(.pxp-grid) {
  grid-template-rows: auto auto auto 1fr;
}

.flexible-grid-layout:has(.pxp-grid) > .grid-region:has(.pxp-grid) {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

.flexible-grid-layout:has(.pxp-grid) .experience-component:has(.pxp-grid) {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

@supports not (grid-template-rows: subgrid) {
  .flexible-grid-layout:has(.pxp-grid) > .grid-region:has(.pxp-grid),
  .flexible-grid-layout:has(.pxp-grid) .experience-component:has(.pxp-grid) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .flexible-grid-layout .pxp-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
}
@media (max-width: 767.98px) {
  .flexible-grid-layout[data-layout-mode=fixed][data-mobile-columns="2"][data-incomplete-row-behavior=stretch] > .grid-region:last-child:nth-child(odd) {
    grid-column: span 2;
  }
  .flexible-grid-layout[data-layout-mode=fixed][data-mobile-columns="2"][data-incomplete-row-behavior=center] > .grid-region:last-child:nth-child(odd) {
    grid-column: 1;
  }
}
.flexible-grid-layout figure.photo-tile-figure {
  margin: 0;
}

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