/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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]!./catridges/app_honda_cars/cartridge/client/default/scss/experience/components/commerceAssets/imageAndTextCommon.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
* Example:
* In case of usage of same font name for all font extensions or can be different font name per extension
*
* $font-list: (
*    ('Barlow', ("woff2": "Barlow", "woff": "robotRegular2", "ttf": "Barlow3"), normal, normal),
*    ('BarlowStd', 'BarlowStd-Medium', 500, normal),
*    ('BarlowStd', 'BarlowStd-Bold', bold, normal)
*) !default;
*
**/
.primary-font {
  font-family: "roobert bold", Arial, Helvetica, Sans-serif;
}

.secondary-font {
  font-family: "Univers45 Light", Arial, Helvetica, Sans-serif;
}

.image-component {
  margin: 0;
  width: 100%;
  position: relative;
}

.common-image-component {
  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: 440.98px) {
  .common-image-component {
    height: rem-calc(126px);
  }
}

.mainbanner-image {
  height: 43.75vw;
}
@media (max-width: 440.98px) {
  .mainbanner-image {
    height: 75vw;
  }
}

.image-heading-container {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}
@media (min-width: 441px) {
  .image-heading-container {
    padding-left: 7%;
  }
}
@media (max-width: 1023.98px) {
  .image-heading-container {
    padding: 0 1rem;
  }
}

.image-heading-text {
  font-family: "roobert bold", Arial, Helvetica, Sans-serif;
  color: #FFFFFF;
}

/* stylelint-disable-next-line selector-class-pattern */
.ITC-image-heading-text {
  color: #FFFFFF;
}
.ITC-image-heading-text .image-heading-title-text p {
  margin: 0;
}

.image-heading-container .mainbanner-sub-text p {
  font-family: #CC0000;
  color: #FFFFFF;
  text-decoration: underline;
}

/* stylelint-disable-next-line selector-class-pattern */
.ITC-text-underneath span {
  color: #000000;
  padding-top: 0.75em;
  text-align: center;
}

.ITC-container {
  overflow-x: hidden;
}

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