/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./sfra-webpack-builder/node_modules/css-unicode-loader/index.js!./sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!./cartridges/app_visionworks_core/cartridge/client/default/scss/experience/components/commerceAssets/marketingBanner.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.marketing-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  gap: 1.25rem;
  text-decoration: none;
  color: inherit;
  margin: 0 auto;
  max-width: 1200px;
  padding: 15px 18px 10px;
}
@media (min-width: 769px) {
  .marketing-banner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 1rem;
  }
}

.marketing-banner--image-on-left-side {
  padding-top: 2px;
}
@media (min-width: 769px) {
  .marketing-banner--image-on-left-side {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
.marketing-banner--image-on-left-side img {
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 991.98px) {
  .marketing-banner--image-on-left-side img {
    -o-object-position: bottom;
       object-position: bottom;
  }
}

.marketing-banner__panel {
  overflow: hidden;
  position: relative;
}
.marketing-banner__panel:hover::after {
  background-color: #e62003;
  bottom: 0;
  content: "";
  display: block;
  height: 1rem;
  left: 0;
  position: absolute;
  right: 0;
}
.marketing-banner__panel:hover {
  color: inherit;
  text-decoration: none;
}
.marketing-banner__panel:focus {
  border: none;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 0 2px #011e41;
          box-shadow: 0 0 0 2px #011e41;
  outline: 0;
  outline-offset: 0;
}

.marketing-banner__content-link,
.marketing-banner__image-link {
  text-decoration: none;
}

.marketing-banner__panel--content {
  background: #ecdfd4;
  padding: 28px 18px;
}
@media (min-width: 769px) {
  .marketing-banner__panel--content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 59.5%;
            flex: 0 0 59.5%;
    padding: 28px 30px;
  }
}
@media (min-width: 992px) {
  .marketing-banner__panel--content {
    padding: 28px 98px;
  }
}

.marketing-banner__panel--image {
  background: #f5f5f5;
}
@media (min-width: 769px) {
  .marketing-banner__panel--image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(40.5% - 1rem);
            flex: 0 0 calc(40.5% - 1rem);
  }
}

.marketing-banner__content-inner {
  max-width: 650px;
}

.marketing-banner__badge {
  margin-bottom: 1.5rem;
}
@media (min-width: 769px) {
  .marketing-banner__badge {
    margin-bottom: 5px;
  }
}

.marketing-banner__badge-image {
  max-width: 220px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.marketing-banner__copy {
  width: 100%;
}
.marketing-banner__copy h1,
.marketing-banner__copy h2,
.marketing-banner__copy h4,
.marketing-banner__copy h5,
.marketing-banner__copy h6 {
  font-family: "Barlow Condensed", "Open Sans Condensed", Arial, sans-serif;
  font-weight: 600;
  line-height: 0.98;
  margin-bottom: 4px;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 769px) {
  .marketing-banner__copy h1,
  .marketing-banner__copy h2,
  .marketing-banner__copy h4,
  .marketing-banner__copy h5,
  .marketing-banner__copy h6 {
    margin-bottom: 0.75rem;
  }
}
.marketing-banner__copy h1,
.marketing-banner__copy h2 {
  font-size: 28px;
  color: #011e41;
}
.marketing-banner__copy h2.text-large {
  font-size: 35px;
}
@media (min-width: 769px) {
  .marketing-banner__copy h2.text-large {
    font-size: 42px;
  }
}
.marketing-banner__copy h2.text-large span {
  color: #e62003;
  font-size: 43px;
}
@media (min-width: 769px) {
  .marketing-banner__copy h2.text-large span {
    font-size: 52px;
  }
}
.marketing-banner__copy h3 {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
}
.marketing-banner__copy p {
  color: #011e41;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  text-align: center;
  text-decoration: underline;
}
.marketing-banner__copy a {
  color: #011e41;
  font-family: "Open Sans", Helvetica, sans-serif;
  text-decoration: none;
}

.marketing-banner__image-link {
  display: block;
  height: 100%;
}

.marketing-banner__hero-image,
.marketing-banner__image-link picture,
.marketing-banner__panel--image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.marketing-banner__hero-image {
  min-height: 260px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
@media (min-width: 769px) {
  .marketing-banner__hero-image {
    max-height: 300px;
  }
}

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