/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./bin/sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./bin/sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./bin/sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./marriott/cartridges/app_mbb_core/cartridge/client/default/scss/experience/inGridBanner.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable scss/no-global-function-names */
/* stylelint-disable */
/* stylelint-enable */
/* stylelint-disable scss/at-mixin-argumentless-call-parentheses */
/* stylelint-disable selector-not-notation */
/* stylelint-disable scss/double-slash-comment-empty-line-before */
/* stylelint-disable declaration-empty-line-before */
/* conversion for px to rem */
/**
  *
  * MBB Custom Button Variables
  *
**/
/* stylelint-disable */
/* stylelint-enable */
/* stylelint-disable scss/at-mixin-argumentless-call-parentheses */
/* stylelint-disable selector-not-notation */
/* stylelint-disable scss/double-slash-comment-empty-line-before */
/* stylelint-disable declaration-empty-line-before */
/* conversion for px to rem */
/* stylelint-disable scss/no-global-function-names */
/* stylelint-disable */
/* stylelint-enable */
/* stylelint-disable scss/at-mixin-argumentless-call-parentheses */
/* stylelint-disable selector-not-notation */
/* stylelint-disable scss/double-slash-comment-empty-line-before */
/* stylelint-disable declaration-empty-line-before */
/* conversion for px to rem */
/**
  *
  * MBB Custom Button Variables
  *
**/
@font-face {
  font-family: "Caslon 540 LT Std Italic";
  src: url("../../fonts/Caslon540LTStd-Italic.woff2") format("woff2"), url("../../fonts/Caslon540LTStd-Italic.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Didot LT Std";
  src: url("../../fonts/DidotLTStd-Roman.woff2") format("woff2"), url("../../fonts/DidotLTStd-Roman.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Acta Display";
  src: url("../../fonts/ActaDisplay-Light.woff2") format("woff2"), url("../../fonts/ActaDisplay-Light.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Roos St Regis Text";
  src: url("../../fonts/RoosStRegisText.woff2") format("woff2"), url("../../fonts/RoosStRegisText.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "W Supreme Web";
  src: url("../../fonts/WSupremeWeb-SemiBold.woff2") format("woff2"), url("../../fonts/WSupremeWeb-SemiBold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("../../fonts/AvenirNextLTPro-Light.woff2") format("woff2"), url("../../fonts/AvenirNextLTPro-Light.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "FreightDisp Pro";
  src: url("../../fonts/FreigDisProMed.woff2") format("woff2"), url("../../fonts/FreigDisProMed.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Sheraton Display Light";
  src: url("../../fonts/GT-Super-Display-Light.woff2") format("woff2"), url("../../fonts/GT-Super-Display-Light.woff") format("woff");
  font-display: swap;
}
/* stylelint-disable */
/* stylelint-enable */
.mbb-in-grid-banner__image {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: var(--focal-point-x) var(--focal-point-y);
     object-position: var(--focal-point-x) var(--focal-point-y);
}
@media (max-width: 767.98px) {
  .mbb-in-grid-banner.mobile-style-small .mbb-in-grid-banner__image {
    aspect-ratio: 358/420;
  }
}
@media (max-width: 767.98px) {
  .mbb-in-grid-banner.mobile-style-large .mbb-in-grid-banner__image {
    aspect-ratio: 358/600;
  }
}
@media (min-width: 768px) {
  .mbb-in-grid-banner.desktop-style-one-tile .mbb-in-grid-banner__image {
    aspect-ratio: 640/809;
  }
}
@media (min-width: 768px) {
  .mbb-in-grid-banner.desktop-style-two-tile .mbb-in-grid-banner__image {
    aspect-ratio: 640/394;
  }
}
@media (min-width: 768px) {
  .mbb-in-grid-banner.desktop-style-three-tile .mbb-in-grid-banner__image {
    aspect-ratio: 22/9;
  }
}
.mbb-in-grid-banner__content {
  padding-top: 2rem;
  padding-right: 1rem;
  padding-bottom: 2rem;
  padding-left: 1rem;
}
@media (min-width: 768px) {
  .mbb-in-grid-banner__content {
    padding: 2rem;
  }
}
@media (min-width: 1920px) {
  .mbb-in-grid-banner__content {
    padding: 3rem;
  }
}
.mbb-in-grid-banner__image-heading, .mbb-in-grid-banner__image-description {
  max-width: 25.875rem;
}
.mbb-in-grid-banner__image-heading.font-family--edition {
  font-family: "Didot LT Std", arial, sans-serif;
}
.mbb-in-grid-banner__image-heading.font-family--jw-marriott {
  font-family: "Avenir Next LT Pro", arial, sans-serif;
}
.mbb-in-grid-banner__image-heading.font-family--the-luxury-collection {
  font-family: "Acta Display", arial, sans-serif;
}
.mbb-in-grid-banner__image-heading.font-family--st-regis {
  font-family: "Roos St Regis Text", arial, sans-serif;
}
.mbb-in-grid-banner__image-heading.font-family--the-ritz-carlton {
  font-family: "Caslon 540 LT Std", arial, sans-serif;
}
.mbb-in-grid-banner__image-heading.font-family--w-hotels {
  font-family: "W Supreme Web", arial, sans-serif;
}
.mbb-in-grid-banner__image-heading.font-family--sheraton {
  font-family: "Sheraton Display Light", arial, sans-serif;
}
.mbb-in-grid-banner__image-description {
  margin-top: 0.6875rem;
}
@media (min-width: 768px) {
  .mbb-in-grid-banner__image-description {
    margin-top: 0.75rem;
  }
}
.mbb-in-grid-banner__gradient-section {
  top: 0;
}
.mbb-in-grid-banner__gradient-section.gradient {
  top: 0;
}
.mbb-in-grid-banner__gradient-section.gradient.gradient-color-Dark {
  --gradient-color-start: rgba(0, 0, 0, 0%);
  --gradient-color-end: rgba(0, 0, 0, 54%);
}
.mbb-in-grid-banner__gradient-section.gradient.gradient-color-Light {
  --gradient-color-start: rgba(255, 255, 255, 0%);
  --gradient-color-end: rgba(255, 255, 255, 54%);
}
.mbb-in-grid-banner__gradient-section.gradient-left, .mbb-in-grid-banner__gradient-section.gradient-bottom, .mbb-in-grid-banner__gradient-section.gradient-right {
  background: linear-gradient(191.47deg, var(--gradient-color-start) 19.51%, var(--gradient-color-end) 76.02%);
}
@media (max-width: 767.98px) {
  .mbb-in-grid-banner__gradient-section.gradient-top-mobile {
    background: linear-gradient(0, var(--gradient-color-start) 20.02%, var(--gradient-color-end) 79.85%);
  }
  .mbb-in-grid-banner__gradient-section.gradient-center-mobile {
    background: linear-gradient(0, var(--gradient-color-start) 0, var(--gradient-color-end) 0);
  }
  .mbb-in-grid-banner__gradient-section.gradient-bottom-mobile {
    background: linear-gradient(191.47deg, var(--gradient-color-start) 19.51%, var(--gradient-color-end) 76.02%);
  }
  .mbb-in-grid-banner__gradient-section.gradient-left-mobile {
    background: linear-gradient(273.75deg, var(--gradient-color-start) 19.95%, var(--gradient-color-end) 79.79%);
  }
}
@media (min-width: 768px) {
  .desktop-style-one-tile .mbb-in-grid-banner__gradient-section.gradient-top-mobile {
    background: linear-gradient(0, var(--gradient-color-start) 20.02%, var(--gradient-color-end) 79.85%);
  }
  .desktop-style-one-tile .mbb-in-grid-banner__gradient-section.gradient-center-mobile {
    background: linear-gradient(0, var(--gradient-color-start) 0, var(--gradient-color-end) 0);
  }
  .desktop-style-one-tile .mbb-in-grid-banner__gradient-section.gradient-bottom-mobile {
    background: linear-gradient(191.47deg, var(--gradient-color-start) 19.51%, var(--gradient-color-end) 76.02%);
  }
  .desktop-style-one-tile .mbb-in-grid-banner__gradient-section.gradient-left-mobile {
    background: linear-gradient(273.75deg, var(--gradient-color-start) 19.95%, var(--gradient-color-end) 79.79%);
  }
}
@media (min-width: 768px) {
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section.gradient-left, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section.gradient-left {
    background: linear-gradient(273.75deg, var(--gradient-color-start) 19.95%, var(--gradient-color-end) 79.79%);
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section.gradient-bottom, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section.gradient-bottom {
    background: linear-gradient(191.47deg, var(--gradient-color-start) 19.51%, var(--gradient-color-end) 76.02%);
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section.gradient-right, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section.gradient-right {
    background: linear-gradient(93.75deg, var(--gradient-color-start) 20.02%, var(--gradient-color-end) 79.85%);
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section.gradient-top, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section.gradient-top {
    background: linear-gradient(0, var(--gradient-color-start) 20.02%, var(--gradient-color-end) 79.85%);
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section.gradient-center, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section.gradient-center {
    background: linear-gradient(0, var(--gradient-color-start) 0, var(--gradient-color-end) 0);
  }
}
@media (max-width: 767.98px) {
  .mbb-in-grid-banner__gradient-section .mobile_bottom-center {
    text-align: center;
    bottom: 0;
  }
  .mbb-in-grid-banner__gradient-section .mobile_center-center {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    text-align: center;
    bottom: auto;
  }
  .mbb-in-grid-banner__gradient-section .mobile_center-top {
    top: 0;
    text-align: center;
  }
  .mbb-in-grid-banner__gradient-section .mobile_bottom-left {
    text-align: left;
    bottom: 0;
  }
  .mbb-in-grid-banner__gradient-section .mobile_top-left {
    left: 0;
    top: 0;
    transform: translate(0, 0);
    text-align: left;
    bottom: auto;
  }
  .mbb-in-grid-banner__gradient-section .mobile_center-left {
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    text-align: left;
    bottom: auto;
  }
}
@media (min-width: 768px) {
  .desktop-style-one-tile .mbb-in-grid-banner__gradient-section .mobile_bottom-center {
    text-align: center;
    bottom: 0;
  }
  .desktop-style-one-tile .mbb-in-grid-banner__gradient-section .mobile_center-center {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    text-align: center;
    bottom: auto;
  }
  .desktop-style-one-tile .mbb-in-grid-banner__gradient-section .mobile_center-top {
    top: 0;
    text-align: center;
  }
  .desktop-style-one-tile .mbb-in-grid-banner__gradient-section .mobile_bottom-left {
    text-align: left;
    bottom: 0;
  }
  .desktop-style-one-tile .mbb-in-grid-banner__gradient-section .mobile_top-left {
    left: 0;
    top: 0;
    transform: translate(0, 0);
    text-align: left;
    bottom: auto;
  }
  .desktop-style-one-tile .mbb-in-grid-banner__gradient-section .mobile_center-left {
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    text-align: left;
    bottom: auto;
  }
}
@media (min-width: 768px) {
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section .top-left, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section .top-left {
    left: 0;
    top: 0;
    transform: translate(0, 0);
    text-align: left;
    bottom: auto;
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section .top-right, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section .top-right {
    top: 0;
    right: 0;
    transform: translate(0, 0);
    text-align: left;
    bottom: auto;
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section .center-left, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section .center-left {
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    text-align: left;
    bottom: auto;
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section .center-center, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section .center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    bottom: auto;
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section .center-right, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section .center-right {
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    text-align: left;
    bottom: auto;
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section .center-top, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section .center-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    bottom: auto;
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section .bottom-left, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section .bottom-left {
    left: 0;
    bottom: 0;
    transform: translate(0, 0);
    text-align: left;
    top: unset;
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section .bottom-center, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section .bottom-center {
    text-align: center;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    top: unset;
  }
  .desktop-style-two-tile .mbb-in-grid-banner__gradient-section .bottom-right, .desktop-style-three-tile .mbb-in-grid-banner__gradient-section .bottom-right {
    bottom: 0;
    right: 0;
    transform: translate(0, 0);
    text-align: left;
    top: unset;
    left: unset;
  }
}
.mbb-in-grid-banner .color__light {
  color: #fff;
}
.mbb-in-grid-banner .color__dark {
  color: #2A2A2A;
}
.mbb-in-grid-banner__cta-button {
  margin-top: 2rem;
}
.mbb-in-grid-banner__cta-button .ig-banner-button {
  padding-top: 0.8125rem;
  padding-right: 1.5rem;
  padding-bottom: 0.8125rem;
  padding-left: 1.5rem;
}
@media (hover: hover) {
  .mbb-in-grid-banner.clickable-mbb-in-grid-banner { /* stylelint-disable-line scss/media-feature-value-dollar-variable */
    cursor: pointer;
  }
}

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