/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/app_custom_bbw/cartridge/client/default/scss/experience/components/commerceAssets/imageAndTextbanner.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Get Font Family Function
 *
 * This function retrieves the font family based on the provided font type and RTL status.
 *
 * Parameters:
 *   $fontType: Type of font family to retrieve. Default is "base".
 *   $noRTL: Boolean indicating whether to exclude RTL support. Default is false.
 *
 * Returns:
 *   Font family value based on the provided parameters.
 */
/**
 * Typography Value Function
 *
 * This function retrieves the value of a specified typography property for a given text type and optional media breakpoint.
 *
 * Parameters:
 *   $property: The typography property to retrieve.
 *   $textType: The text type for which the typography property value is needed. Default is "default".
 *   $media: Optional media breakpoint to retrieve typography property value for responsive designs.
 *
 * Returns:
 *   The value of the specified typography property for the given text type and optional media breakpoint.
 */
/**
 * Font Size Function (fz)
 *
 * This function retrieves the font size value for a given text type and optional media breakpoint using the `typography-value` function.
 *
 * Parameters:
 *   $textType: The text type for which the font size value is needed. Default is "default".
 *   $media: Optional media breakpoint to retrieve font size value for responsive designs.
 *
 * Returns:
 *   The font size value for the specified text type and optional media breakpoint.
 */
/**
 * Line Height Function (lh)
 *
 * This function retrieves the line height value for a given text type and optional media breakpoint using the `typography-value` function.
 *
 * Parameters:
 *   $textType: The text type for which the line height value is needed. Default is "default".
 *   $media: Optional media breakpoint to retrieve line height value for responsive designs.
 *
 * Returns:
 *   The line height value for the specified text type and optional media breakpoint.
 */
/**
 * Font Weight Function (fw)
 *
 * This function retrieves the font weight value for a given text type and optional media breakpoint using the `typography-value` function.
 *
 * Parameters:
 *   $textType: The text type for which the font weight value is needed. Default is "default".
 *   $media: Optional media breakpoint to retrieve font weight value for responsive designs.
 *
 * Returns:
 *   The font weight value for the specified text type and optional media breakpoint.
 */
/**
 * Font Family Function (ff)
 *
 * This function retrieves the font family value for a given text type and optional media breakpoint using the `typography-value` function.
 *
 * Parameters:
 *   $textType: The text type for which the font family value is needed. Default is "default".
 *   $media: Optional media breakpoint to retrieve font family value for responsive designs.
 *
 * Returns:
 *   The font family value for the specified text type and optional media breakpoint.
 */
/**
 * Apply Style Rules Mixin
 *
 * This mixin applies style rules based on the provided map.
 * It supports nested states, pseudo-elements, media queries, class states,
 * custom mixins for icons and text styles, and regular CSS properties.
 *
 * Parameters:
 *   $mainMap: Main map containing the style rules.
 *   $key: Key in the main map to apply styles for (optional).
 *   $textType: Text type for additional comments (optional).
 */
/**
 * Text Mixin
 *
 * This mixin applies text styles based on the provided text type and text map.
 *
 * Parameters:
 *   $textType: Text type to apply styles for (default: body).
 *   $textMap: Text map containing the text styles (default: $brandTypography).
 */
/**
 * Create Components From Map Mixin
 *
 * This mixin generates CSS components based on the provided main map and class prefix.
 *
 * Parameters:
 *   $mainMap: Main map containing component types and their respective styles.
 *   $classPrefix: Prefix for the generated CSS class names.
 */
/**
 * Mixin for creating helper classes with configurable properties.
 * This mixin generates helper classes based on the provided configuration.
 *
 * @param {Map} $propertyConfig - Configuration map containing properties and values.
 * @param {String} $propertyClass - Base class name for the helper classes.
 */
/**
 * Mixin to handle helper class properties and values
 *
 * This mixin iterates over a list of property values and generates helper classes for each value.
 * It includes the `createHelperForEachMedia` mixin to create helper classes for each media breakpoint,
 * and then invokes the `helperHandlerValues` mixin to apply the property values to the generated classes.
 *
 * @param {String} $classname - The base class name for the helper classes
 * @param {List} $properties - List of properties to apply to the helper classes
 * @param {List} $values - List of values to apply to the helper classes
 * @param {String} $unit - Optional unit for the property values (default: '')
 * @param {Map} $propertyConfig - Optional configuration for generating helper classes (default: false)
 */
/**
 * Mixin to handle a single property value for a helper class.
 * If the value is zero, the unit is removed.
 * If the unit is "rem" and the value is not zero, it is converted to "rem".
 * Generates CSS with !important flag for specificity.
 *
 * @param {String} $property - The CSS property name.
 * @param {Number} $value - The value of the CSS property.
 * @param {String} $unit - The unit of measurement for the value.
 */
/**
 * Mixin to create helper classes for each media breakpoint.
 * Dynamically generates helper classes based on the provided parameters.
 * Applies content within each generated helper class.
 *
 * @param {String} $classNameStart - The base class name for the helper classes.
 * @param {String} $classNameEnd - The optional suffix for the helper class name.
 * @param {Map} $propertyConfig - Configuration settings for the helper classes.
 */
/**
 * Mixin to apply absolute positioning to an element based on specified device breakpoints.
 * Positions the element horizontally and vertically with options for center, left, or right alignment.
 * Generates CSS for absolute positioning and alignment properties.
 *
 * @param {String} $index - Index value used to generate unique class names for positioned elements.
 * @param {String} $device - Device breakpoint identifier ('d' for desktop, 'm' for mobile, etc.).
 */
/**
 * Mixin to apply static positioning to an element within a root container.
 * Handles various alignment options based on specified device breakpoints.
 * Generates CSS for static positioning and alignment properties.
 *
 * @param {String} $root - Selector for the root container element.
 * @param {String} $device - Device breakpoint identifier ('d' for desktop, 'm' for mobile, etc.).
 */
/**
 * Mixin to generate media queries for screen sizes equal to or greater than the specified breakpoint.
 *
 * @param {String} $media - The breakpoint name.
 */
/**
 * Mixin to generate media queries for screen sizes equal to or smaller than the specified breakpoint.
 *
 * @param {String} $media - The breakpoint name.
 */
/**
 * Mixin to generate media queries for screen sizes between two specified breakpoints.
 *
 * @param {String} $mediaUp - The upper breakpoint name.
 * @param {String} $mediaDown - The lower breakpoint name.
 */
@media only screen and (min-width: 1024px) {
  .image-text-banner-container .banner-media-half .image-link {
    height: 100%;
  }
}
.image-text-banner-container .banner-media-half .content-image-block {
  width: 100%;
  height: auto;
}
.image-text-banner-container .banner-media-half .content-image {
  width: 100%;
  height: auto;
}
.image-text-banner-container .banner-media-half .banner-video-container .banner-video-volume,
.image-text-banner-container .banner-media-half .banner-video-container .banner-video-play-pause {
  position: absolute;
  bottom: 20px;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1;
  cursor: pointer;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.image-text-banner-container .banner-media-half .banner-video-container .banner-video-volume:hover,
.image-text-banner-container .banner-media-half .banner-video-container .banner-video-play-pause:hover {
  background: rgb(255, 255, 255);
}
.image-text-banner-container .banner-media-half .banner-video-container .banner-video-volume svg,
.image-text-banner-container .banner-media-half .banner-video-container .banner-video-play-pause svg {
  width: 20px;
  height: 20px;
}
.image-text-banner-container .banner-media-half .banner-video-container .banner-video-play-pause {
  left: 20px;
}
.image-text-banner-container .banner-media-half .banner-video-container .banner-video-volume {
  left: 70px;
}
.image-text-banner-container .banner-text-half {
  padding: 2rem 0 2.5rem 0;
  color: #1a242e;
  padding: 2rem 4rem 2.5rem 4rem;
}
.image-text-banner-container .banner-text-half .banner-text-inner-wrapper {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  min-height: 50px;
}
@media only screen and (max-width: 767px) {
  .image-text-banner-container .banner-text-half .banner-text-inner-wrapper {
    padding-left: 6.7856rem;
    padding-right: 6.7856rem;
  }
}
.image-text-banner-container .banner-text-half .banner-text-inner-wrapper .banner-heading {
  font-size: 1.75rem;
  line-height: 1.2;
  color: #1a242e;
}
@media only screen and (min-width: 1024px) {
  .image-text-banner-container .banner-text-half .banner-text-inner-wrapper .banner-heading {
    font-size: 2.5rem;
  }
}
.image-text-banner-container .banner-text-half .banner-text-inner-wrapper .banner-description {
  font-size: 1rem;
  line-height: 1.5;
  color: #1a242e;
}
@media only screen and (max-width: 1023px) {
  .image-text-banner-container .banner-text-half .banner-text-inner-wrapper .banner-description {
    line-height: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .image-text-banner-container .banner-text-half .banner-text-inner-wrapper .banner-description {
    font-size: 14px;
    line-height: 1rem;
  }
}
.image-text-banner-container .banner-text-half .banner-text-inner-wrapper .banner-description p {
  margin-bottom: 0;
}
.image-text-banner-container .banner-text-half .banner-text-inner-wrapper .banner-button-wrapper .banner-button {
  font-weight: 600;
  font-size: 16px;
  border-radius: 0.5rem;
  background-color: var(--btn-bg, #1a242e);
  color: var(--btn-color, #fff);
  border: 1px solid var(--btn-bg, #1a242e);
  text-transform: none;
  line-height: 1.7;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding-left: 20px;
  padding-right: 20px;
}
@media only screen and (max-width: 1023px) {
  .image-text-banner-container .banner-text-half .banner-text-inner-wrapper .banner-button-wrapper .banner-button {
    font-size: 14px;
    letter-spacing: 0;
    min-height: 40px;
  }
}
.image-text-banner-container .banner-text-half .banner-text-inner-wrapper .banner-button-wrapper .banner-button:hover, .image-text-banner-container .banner-text-half .banner-text-inner-wrapper .banner-button-wrapper .banner-button:focus {
  background-color: var(--btn-bg, #212d39);
  color: var(--btn-color, #fff);
  opacity: 0.9;
  text-decoration: none;
}

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