[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    word-break: normal;
  49    overflow-wrap: anywhere;
  50    min-width: 0;
  51  }
  52  
  53  :where(.wp-block-media-text > .wp-block-media-text__content) {
  54    padding: 0 8%;
  55  }
  56  
  57  .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
  58    /*rtl:begin:ignore*/
  59    grid-column: 2;
  60    grid-row: 1;
  61    /*rtl:end:ignore*/
  62  }
  63  
  64  .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
  65    /*rtl:begin:ignore*/
  66    grid-column: 1;
  67    grid-row: 1;
  68    /*rtl:end:ignore*/
  69  }
  70  
  71  .wp-block-media-text__media a {
  72    display: block;
  73  }
  74  
  75  .wp-block-media-text__media img,
  76  .wp-block-media-text__media video {
  77    height: auto;
  78    max-width: unset;
  79    width: 100%;
  80    vertical-align: middle;
  81  }
  82  
  83  /* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
  84  .wp-block-media-text.is-image-fill > .wp-block-media-text__media {
  85    height: 100%;
  86    min-height: 250px;
  87    background-size: cover;
  88  }
  89  
  90  .wp-block-media-text.is-image-fill > .wp-block-media-text__media > a {
  91    display: block;
  92    height: 100%;
  93  }
  94  
  95  .wp-block-media-text.is-image-fill > .wp-block-media-text__media img {
  96    position: absolute;
  97    width: 1px;
  98    height: 1px;
  99    padding: 0;
 100    margin: -1px;
 101    overflow: hidden;
 102    clip-path: inset(50%);
 103    border: 0;
 104  }
 105  
 106  /* Image fill for versions 8 and onwards */
 107  .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
 108    position: relative;
 109    height: 100%;
 110    min-height: 250px;
 111  }
 112  
 113  .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
 114    display: block;
 115    height: 100%;
 116  }
 117  
 118  .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
 119    position: absolute;
 120    width: 100%;
 121    height: 100%;
 122    object-fit: cover;
 123  }
 124  
 125  /*
 126  * Here we here not able to use a mobile first CSS approach.
 127  * Custom widths are set using inline styles, and on mobile,
 128  * we need 100% width, so we use important to overwrite the inline style.
 129  * If the style were set on mobile first, on desktop styles,
 130  * we would have no way of setting the style again to the inline style.
 131  */
 132  @media (max-width: 600px) {
 133    .wp-block-media-text.is-stacked-on-mobile {
 134      grid-template-columns: 100% !important;
 135    }
 136    .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
 137      grid-column: 1;
 138      grid-row: 1;
 139    }
 140    .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
 141      grid-column: 1;
 142      grid-row: 2;
 143    }
 144  }