@import "../base-styles/breakpoints";

// rounded media
.wp-block-media-text .wp-block-media-text__media img {
  border-radius: var(--wp--custom--media-text-media-border-radius, var(--wp--custom--border-radius--2-x-large));
}

/*
* 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: #{ ($break-medium) }) {
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;

    .wp-block-media-text__media {
      grid-column: 1;
      grid-row: 1;
    }

    .wp-block-media-text__content {
      grid-column: 1;
      grid-row: 2;
    }
  }
}