/*
Returns a CSS clamp function which resolves to
$size-at-min-width when page width is below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
.experience-commerce_layouts-cmBlockCustom3Col {
  background-color: #E7E7E7; }
  .experience-commerce_layouts-cmBlockCustom3Col .cm-block-3col-2row .cmImageWithButton {
    position: relative;
    overflow: hidden;
    border-radius: 10px; }

.cm-block-3col-2row, .cm-block-3col-2row-wrapper {
  -ms-flex-pack: center;
      justify-content: center;
  gap: 1.25rem; }

.cm-block-3col-2row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  margin: 5rem !important auto;
  padding: 5rem 0; }
  .cm-block-3col-2row-wrapper {
    width: 100%;
    padding: 0 15px; }
  .cm-block-3col-2row-mobile {
    width: 100%; }
  .cm-block-3col-2row .region {
    padding: 0;
    margin: 0;
    -ms-flex: 1 1 0px;
        flex: 1 1 0;
    height: inherit; }
    .cm-block-3col-2row .region.col-12.col-lg-8 picture {
      transform: translateX(20%); }
    .cm-block-3col-2row .region.col-12.col-lg-8 .image-component-overlay {
      max-width: 450px; }
    .cm-block-3col-2row .region.col-12.col-lg-8 img {
      transform: translate(5%, -10%);
      height: auto; }
    .cm-block-3col-2row .region.col-12.col-lg-6 img {
      transform: translateY(0%);
      height: auto;
      scale: 1; }
      .cm-block-3col-2row .region.col-12.col-lg-6 img:hover {
        transform: translateY(-5%); }
  .cm-block-3col-2row .image-component {
    position: relative;
    overflow: hidden; }
    .cm-block-3col-2row .image-component img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: top;
         object-position: top;
      overflow: hidden;
      transition: 1.5s;
      scale: 0.8;
      transform: translate(12%, 12%); }
    .cm-block-3col-2row .image-component picture {
      filter: brightness(0.6);
      scale: 1;
      transition: all ease-in-out .5s;
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      max-height: 400px; }
    .cm-block-3col-2row .image-component:hover picture {
      filter: brightness(0.8); }
      .cm-block-3col-2row .image-component:hover picture img {
        scale: 0.9; }
    .cm-block-3col-2row .image-component .btn-learn-more {
      height: 60px;
      width: 60px;
      background: #6632F5;
      border-radius: 50%;
      z-index: 10;
      transition: all ease 0.2s;
      position: absolute;
      bottom: 20px;
      left: 20px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: center;
          justify-content: center; }
      .cm-block-3col-2row .image-component .btn-learn-more::before {
        color: #C2C2C2;
        font-size: 1.25rem !important;
        font-weight: 500 !important;
        font-weight: 300;
        font-family: "Font Awesome 5 Pro";
        font-style: normal;
        font-size: 1em;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        content: "\F054"; }
      .cm-block-3col-2row .image-component .btn-learn-more:hover {
        filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); }
    @media (max-width: 991.98px) {
      .cm-block-3col-2row .image-component::before {
        position: absolute;
        content: '';
        bottom: 0;
        left: 0;
        z-index: 1;
        background: linear-gradient(transparent 75%, rgba(0, 0, 0, 0.75));
        width: 100%;
        height: 100%; }
      .cm-block-3col-2row .image-component picture {
        filter: brightness(1); }
      .cm-block-3col-2row .image-component:hover img {
        transform: scale(1); } }
  .cm-block-3col-2row .image-component-overlay {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: start;
        align-items: flex-start;
    z-index: 2;
    position: absolute;
    top: 40px;
    left: 20px;
    max-width: 300px; }
    .cm-block-3col-2row .image-component-overlay-title {
      color: white;
      font-weight: 600;
      white-space: nowrap;
      line-height: 1; }
      @media (min-width: 1200px) {
        .cm-block-3col-2row .image-component-overlay-title {
          font-size: 3rem; } }
    .cm-block-3col-2row .image-component-overlay-description {
      color: white;
      font-weight: 600; }
      @media (min-width: 1200px) {
        .cm-block-3col-2row .image-component-overlay-description {
          font-size: 1rem; } }
    @media (max-width: 991.98px) {
      .cm-block-3col-2row .image-component-overlay {
        top: auto;
        bottom: 1rem; }
        .cm-block-3col-2row .image-component-overlay a {
          border: none;
          color: white;
          font-size: 0.875rem;
          font-weight: 400;
          padding: 0.7rem 0.75rem; } }
  @media (max-width: 768.98px) {
    .cm-block-3col-2row .shop-now-carousel img {
      max-height: -moz-fit-content;
      max-height: fit-content;
      min-height: 350px; } }
  .cm-block-3col-2row .block-info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    margin-bottom: 2.5rem; }
  .cm-block-3col-2row .block-title {
    font-size: 3.25rem;
    font-weight: 700;
    text-transform: capitalize;
    text-align: center;
    line-height: 1.1;
    margin-bottom: 0; }
    @media (max-width: 543.98px) {
      .cm-block-3col-2row .block-title {
        font-size: 2.5rem; } }
  .cm-block-3col-2row .block-desc {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.625rem;
    text-align: center;
    padding: 0 0.625rem; }

@media (max-width: 991.98px) and (max-width: 543.98px) {
  .cm-block-3col-2row {
    margin-top: 5rem !important; } }
  @media (max-width: 991.98px) {
    .cm-block-3col-2row .shop-now-carousel {
      position: relative;
      overflow-x: visible; }
      .cm-block-3col-2row .shop-now-carousel .slick-list {
        padding-right: 100px;
        max-height: 350px; }
        .cm-block-3col-2row .shop-now-carousel .slick-list .slick-slide {
          padding: 0;
          margin-left: 0.5rem;
          max-height: 350px;
          max-width: 223px;
          height: 100%; } }

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