/* #region "../src/elements/image-box/image-box.scss" */
/*
- type: css
*/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.image-box-card {
  --card-padding: clamp(1.25rem, -3.5714285714rem + 21.4285714286cqw, 2rem);
  --form-color: var(--white);
  --form-hover: var(--grey-50);
  --form-active: var(--grey-200);
}
.image-box-card .image-box-title {
  margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  .image-box-card.with-hidden-label {
    --label-offset: var(--card-padding);
  }
  .image-box-card.with-hidden-label .image-box-title {
    transform: translateY(var(--below-the-fold-height, 0px));
    transition: transform var(--card-transition-duration);
  }
  .image-box-card.with-hidden-label .image-box-title:is(body:where(.no-js, .not-initialized) *) {
    display: none;
  }
  .image-box-card.with-hidden-label .below-the-fold {
    padding-top: clamp(0.625rem, -1.7857142857rem + 10.7142857143cqw, 1rem);
    transform: translateY(var(--below-the-fold-height, 0px)) translateY(var(--label-offset));
    transition: transform var(--card-transition-duration);
  }
  .image-box-card.with-hidden-label:hover {
    --below-the-fold-height: 0px !important;
    --label-offset: 0px !important;
  }
}
/* #endregion "../src/elements/image-box/image-box.scss" */

head{--webpack--css-wpce--image-box:&\.\.\/src\/elements\/image-box\/image-box\.scss;}
/*# sourceMappingURL=css-wpce--image-box.css.map*/