[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          margin-left: var(--global--spacing-horizontal);
  15      }
  16  
  17      .alignleft {
  18          margin-right: var(--global--spacing-horizontal);
  19      }
  20  
  21      a:focus img {
  22          outline-offset: 2px;
  23      }
  24  }
  25  
  26  // Remove vertical margins from image block wrappers when floated
  27  .entry-content > *[class="wp-block-image"],
  28  .entry-content [class*="inner-container"] > *[class="wp-block-image"] {
  29      margin-top: 0;
  30      margin-bottom: 0;
  31  
  32      // Remove top margins from the following element when previous image block is floated
  33      + * {
  34          margin-top: 0;
  35      }
  36  }
  37  
  38  // Block Styles
  39  .wp-block-image.is-style-twentytwentyone-border img,
  40  .wp-block-image.is-style-twentytwentyone-image-frame img {
  41      border: calc(3 * var(--separator--height)) solid var(--global--color-border);
  42  }
  43  
  44  .wp-block-image.is-style-twentytwentyone-image-frame img {
  45      padding: var(--global--spacing-unit);
  46  }
  47  
  48  .entry-content {
  49  
  50      > .wp-block-image {
  51  
  52          > .alignleft,
  53          > .alignright {
  54              @include media(mobile) {
  55                  max-width: 50%;
  56              }
  57              @include media(mobile-only) {
  58                  margin-left: 0;
  59                  margin-right: 0;
  60              }
  61          }
  62      }
  63  }