/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/components/edition_assets/hoverCard.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 */
.hover-card {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  padding: 1rem;
  width: 100%;
  text-align: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  color: #F9F6F4;
}
.hover-card::before {
  content: "";
  z-index: 0;
  width: 100%;
  position: absolute;
  inset: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  background: linear-gradient(188.26deg, rgba(0, 0, 0, 0) -49.09%, rgba(0, 0, 0, 0.54) 91.2%);
}
.hover-card::after {
  content: "";
  z-index: 0;
  width: 100%;
  position: absolute;
  inset: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  background: linear-gradient(180.09deg, rgba(0, 0, 0, 0) 25.17%, rgba(0, 0, 0, 0.4) 97.1%);
  opacity: 0;
}
@media (min-width: 768px) {
  .hover-card {
    aspect-ratio: 1.25/1;
  }
}
.hover-card .hover-card_text {
  z-index: 1;
  transition: opacity 0.2s ease;
  margin: 0;
  font-family: "Didot LT Std", arial, sans-serif;
  font-size: 2.625rem;
  line-height: 2.8875rem;
  text-transform: uppercase;
}
.hover-card .hover-card_over-text {
  z-index: 1;
  transition: opacity 0.2s ease;
  margin: 0;
  opacity: 0;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 0;
  font-size: 1.125rem;
  line-height: 3.125rem;
  text-align: left;
  text-transform: uppercase;
}
.hover-card:hover {
  color: #F9F6F4;
  text-decoration: none;
}

@media (hover: hover) { /* stylelint-disable-line scss/media-feature-value-dollar-variable */
  .hover-card:hover::before {
    opacity: 0;
  }
  .hover-card:hover::after {
    opacity: 1;
  }
  .hover-card:hover .hover-card_text {
    opacity: 0;
  }
  .hover-card:hover .hover-card_over-text {
    opacity: 1;
  }
}

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