[Summary view] [Print] [Text view]

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