[Summary view] [Print] [Text view]

   1  .wp-block-image {
   2      text-align: center;
   3  
   4      figcaption {
   5          color: var(--global--color-primary);
   6          font-size: var(--global--font-size-xs);
   7          line-height: var(--global--line-height-body);
   8          margin-top: calc(0.5 * var(--global--spacing-unit));
   9          margin-bottom: var(--global--spacing-unit);
  10          text-align: center;
  11      }
  12  
  13      .alignright {
  14  
  15          /*rtl:ignore*/
  16          margin-left: var(--global--spacing-horizontal);
  17  
  18          /*rtl:ignore*/
  19          margin-right: 0;
  20      }
  21  
  22      .alignleft {
  23  
  24          /*rtl:ignore*/
  25          margin-right: var(--global--spacing-horizontal);
  26  
  27          /*rtl:ignore*/
  28          margin-left: 0;
  29      }
  30  
  31      a:focus img {
  32          outline-offset: 2px;
  33      }
  34  }
  35  
  36  // Remove vertical margins from image block wrappers when floated
  37  .entry-content > *[class="wp-block-image"],
  38  .entry-content [class*="inner-container"] > *[class="wp-block-image"] {
  39      margin-top: 0;
  40      margin-bottom: 0;
  41  
  42      // Remove top margins from the following element when previous image block is floated
  43      + * {
  44          margin-top: 0;
  45      }
  46  }
  47  
  48  // Block Styles
  49  .wp-block-image.is-style-twentytwentyone-border img,
  50  .wp-block-image.is-style-twentytwentyone-image-frame img {
  51      border: calc(3 * var(--separator--height)) solid var(--global--color-border);
  52  }
  53  
  54  .wp-block-image.is-style-twentytwentyone-image-frame img {
  55      padding: var(--global--spacing-unit);
  56  }
  57  
  58  .entry-content {
  59  
  60      > .wp-block-image {
  61  
  62          @include media(mobile) {
  63  
  64              > .alignleft,
  65              > .alignright {
  66                  max-width: 50%;
  67              }
  68          }
  69  
  70          @include media(mobile-only) {
  71  
  72              > .alignleft,
  73              > .alignright {
  74                  margin-left: 0;
  75                  margin-right: 0;
  76  
  77                  &:after {
  78                      content: "";
  79                      display: block;
  80                      height: 1px;
  81                      width: 1em;
  82  
  83                      /*rtl:ignore*/
  84                      float: right;
  85                  }
  86              }
  87  
  88              > .alignright:after {
  89  
  90                  /*rtl:ignore*/
  91                  float: left;
  92              }
  93          }
  94      }
  95  }