[Summary view] [Print] [Text view]

   1  /**
   2   * Breakpoints & Media Queries
   3   */
   4  .wp-block-media-text {
   5    /*!rtl:begin:ignore*/
   6    direction: ltr;
   7    /*!rtl:end:ignore*/
   8    display: grid;
   9    grid-template-columns: 50% 1fr;
  10    grid-template-rows: auto;
  11    box-sizing: border-box;
  12  }
  13  .wp-block-media-text.has-media-on-the-right {
  14    grid-template-columns: 1fr 50%;
  15  }
  16  
  17  .wp-block-media-text.is-vertically-aligned-top > .wp-block-media-text__content,
  18  .wp-block-media-text.is-vertically-aligned-top > .wp-block-media-text__media {
  19    align-self: start;
  20  }
  21  
  22  .wp-block-media-text > .wp-block-media-text__content,
  23  .wp-block-media-text > .wp-block-media-text__media,
  24  .wp-block-media-text.is-vertically-aligned-center > .wp-block-media-text__content,
  25  .wp-block-media-text.is-vertically-aligned-center > .wp-block-media-text__media {
  26    align-self: center;
  27  }
  28  
  29  .wp-block-media-text.is-vertically-aligned-bottom > .wp-block-media-text__content,
  30  .wp-block-media-text.is-vertically-aligned-bottom > .wp-block-media-text__media {
  31    align-self: end;
  32  }
  33  
  34  .wp-block-media-text > .wp-block-media-text__media {
  35    /*!rtl:begin:ignore*/
  36    grid-column: 1;
  37    grid-row: 1;
  38    /*!rtl:end:ignore*/
  39    margin: 0;
  40  }
  41  
  42  .wp-block-media-text > .wp-block-media-text__content {
  43    direction: ltr;
  44    /*!rtl:begin:ignore*/
  45    grid-column: 2;
  46    grid-row: 1;
  47    /*!rtl:end:ignore*/
  48    padding: 0 8% 0 8%;
  49    word-break: break-word;
  50  }
  51  
  52  .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
  53    /*!rtl:begin:ignore*/
  54    grid-column: 2;
  55    grid-row: 1;
  56    /*!rtl:end:ignore*/
  57  }
  58  
  59  .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
  60    /*!rtl:begin:ignore*/
  61    grid-column: 1;
  62    grid-row: 1;
  63    /*!rtl:end:ignore*/
  64  }
  65  
  66  .wp-block-media-text__media a {
  67    display: block;
  68  }
  69  
  70  .wp-block-media-text__media img,
  71  .wp-block-media-text__media video {
  72    height: auto;
  73    max-width: unset;
  74    width: 100%;
  75    vertical-align: middle;
  76  }
  77  
  78  /* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
  79  .wp-block-media-text.is-image-fill > .wp-block-media-text__media {
  80    height: 100%;
  81    min-height: 250px;
  82    background-size: cover;
  83  }
  84  
  85  .wp-block-media-text.is-image-fill > .wp-block-media-text__media > a {
  86    display: block;
  87    height: 100%;
  88  }
  89  
  90  .wp-block-media-text.is-image-fill > .wp-block-media-text__media img {
  91    position: absolute;
  92    width: 1px;
  93    height: 1px;
  94    padding: 0;
  95    margin: -1px;
  96    overflow: hidden;
  97    clip: rect(0, 0, 0, 0);
  98    border: 0;
  99  }
 100  
 101  /* Image fill for versions 8 and onwards */
 102  .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
 103    height: 100%;
 104    min-height: 250px;
 105  }
 106  
 107  .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
 108    display: block;
 109    height: 100%;
 110  }
 111  
 112  .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
 113    width: 100%;
 114    height: 100%;
 115    object-fit: cover;
 116  }
 117  
 118  /*
 119  * Here we here not able to use a mobile first CSS approach.
 120  * Custom widths are set using inline styles, and on mobile,
 121  * we need 100% width, so we use important to overwrite the inline style.
 122  * If the style were set on mobile first, on desktop styles,
 123  * we would have no way of setting the style again to the inline style.
 124  */
 125  @media (max-width: 600px) {
 126    .wp-block-media-text.is-stacked-on-mobile {
 127      grid-template-columns: 100% !important;
 128    }
 129    .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
 130      grid-column: 1;
 131      grid-row: 1;
 132    }
 133    .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
 134      grid-column: 1;
 135      grid-row: 2;
 136    }
 137  }