/*!************************************************************!*\
  !*** ../src/elements/image-with-text/image-with-text.scss ***!
  \************************************************************/
/*******************************
 * 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-with-text-wrapper-section:not(#increase-specificity):where(:has(+ .image-with-text-wrapper-section),
:has(+ .image-with-text-wrapper-section)) {
  --section-padding-bottom: calc(0.5 * var(--element-spacing-lg));
}

.image-with-text-wrapper-section:not(#increase-specificity) + .image-with-text-wrapper-section,
.image-with-text-wrapper-section:not(#increase-specificity) + .image-with-text-wrapper-section {
  --section-padding-top: calc(0.5 * var(--element-spacing-lg));
}

.image-with-text-wrapper .image-with-text {
  --cols-xs: 12;
  --cols-md: 6;
  align-items: center;
}
.image-with-text-wrapper .image-with-text .image-container img {
  border-radius: var(--rounded);
}
@media (width < 992px /* md */) {
  .image-with-text-wrapper .image-with-text .image-container img {
    max-width: min(450px, 100%);
  }
}
@media (width >= 992px /* md */) {
  .image-with-text-wrapper .image-with-text {
    gap: var(--layout-gap);
  }
  .image-with-text-wrapper .image-with-text .content {
    padding-block: var(--image-text-padding-y, /* grow(24, 40, $from: md) */ clamp(1.5rem, 0.0581395349rem + 2.3255813953vw, 2.5rem));
    padding-inline: var(--image-text-padding-x, /* grow(24, 40, $from: md, $to: xl) */ clamp(1.5rem, -0.931372549rem + 3.9215686275vw, 2.5rem));
  }
  @media (width >= 1400px /* xl */) {
    .image-with-text-wrapper .image-with-text .content {
      padding-inline: var(--image-text-padding-x, /* grow(40, 135, $from: xl) */ clamp(2.5rem, -27.1875rem + 33.9285714286vw, 8.4375rem));
    }
  }
  .image-with-text-wrapper .image-with-text:where([data-align=image-right] > *) .image-container {
    order: 1;
  }
}
.image-with-text-wrapper .image-with-text .content > :first-child, .image-with-text-wrapper .image-with-text .content > link:first-child + * {
  margin-top: 0;
}
.image-with-text-wrapper .image-with-text .content > :last-child {
  margin-bottom: 0;
}
.image-with-text-wrapper .image-with-text .content > :is(.large-text, .lead-text):first-child > :first-child {
  margin-top: 0;
}
.image-with-text-wrapper .image-with-text .content > :is(.large-text, .lead-text):last-child > :last-child {
  margin-bottom: 0;
}

/*# sourceMappingURL=css-wpce--image-with-text.css.map*/