/**

 * Colors

 */

/**

 * Breakpoints & Media Queries

 */

/**

 * SCSS Variables.

 *

 * Please use variables from this sheet to ensure consistency across the UI.

 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.

 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.

 */

/**

 * Colors

 */

/**

 * Fonts & basic variables.

 */

/**

 * Grid System.

 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/

 */

/**

 * Dimensions.

 */

/**

 * Shadows.

 */

/**

 * Editor widths.

 */

/**

 * Block & Editor UI.

 */

/**

 * Block paddings.

 */

/**

 * React Native specific.

 * These variables do not appear to be used anywhere else.

 */

/**

 * Breakpoint mixins

 */

/**

 * Long content fade mixin

 *

 * Creates a fading overlay to signify that the content is longer

 * than the space allows.

 */

/**

 * Focus styles.

 */

/**

 * Applies editor left position to the selector passed as argument

 */

/**

 * Styles that are reused verbatim in a few places

 */

/**

 * Allows users to opt-out of animations via OS-level preferences.

 */

/**

 * Reset default styles for JavaScript UI based pages.

 * This is a WP-admin agnostic reset

 */

/**

 * Reset the WP Admin page styles for Gutenberg-like pages.

 */

.wp-block-media-text {

  direction: ltr;

  display: grid;

  grid-template-columns: 50% 1fr;

  grid-template-rows: auto;

}

.wp-block-media-text.has-media-on-the-right {

  grid-template-columns: 1fr 50%;

}

.wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content,

.wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media {

  align-self: start;

}

.wp-block-media-text .wp-block-media-text__content,

.wp-block-media-text .wp-block-media-text__media,

.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content,

.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media {

  align-self: center;

}

.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content,

.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media {

  align-self: end;

}

.wp-block-media-text .wp-block-media-text__media {

  grid-column: 1;

  grid-row: 1;

  margin: 0;

}

.wp-block-media-text .wp-block-media-text__content {

  direction: rtl;

  grid-column: 2;

  grid-row: 1;

  padding: 0 8% 0 8%;

  word-break: break-word;

}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {

  grid-column: 2;

  grid-row: 1;

}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {

  grid-column: 1;

  grid-row: 1;

}

.wp-block-media-text__media img,

.wp-block-media-text__media video {

  max-width: unset;

  width: 100%;

  vertical-align: middle;

}

.wp-block-media-text.is-image-fill .wp-block-media-text__media {

  height: 100%;

  min-height: 250px;

  background-size: cover;

}

.wp-block-media-text.is-image-fill .wp-block-media-text__media > a {

  display: block;

  height: 100%;

}

.wp-block-media-text.is-image-fill .wp-block-media-text__media img {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}

/*

* Here we here not able to use a mobile first CSS approach.

* Custom widths are set using inline styles, and on mobile,

* we need 100% width, so we use important to overwrite the inline style.

* If the style were set on mobile first, on desktop styles,

* we would have no way of setting the style again to the inline style.

*/

@media (max-width: 600px) {

  .wp-block-media-text.is-stacked-on-mobile {

    grid-template-columns: 100% !important;

  }

  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {

    grid-column: 1;

    grid-row: 1;

  }

  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {

    grid-column: 1;

    grid-row: 2;

  }

}