[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    position: relative;
 104    height: 100%;
 105    min-height: 250px;
 106  }
 107  
 108  .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
 109    display: block;
 110    height: 100%;
 111  }
 112  
 113  .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
 114    position: absolute;
 115    width: 100%;
 116    height: 100%;
 117    object-fit: cover;
 118  }
 119  
 120  /*
 121  * Here we here not able to use a mobile first CSS approach.
 122  * Custom widths are set using inline styles, and on mobile,
 123  * we need 100% width, so we use important to overwrite the inline style.
 124  * If the style were set on mobile first, on desktop styles,
 125  * we would have no way of setting the style again to the inline style.
 126  */
 127  @media (max-width: 600px) {
 128    .wp-block-media-text.is-stacked-on-mobile {
 129      grid-template-columns: 100% !important;
 130    }
 131    .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
 132      grid-column: 1;
 133      grid-row: 1;
 134    }
 135    .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
 136      grid-column: 1;
 137      grid-row: 2;
 138    }
 139  }