[Summary view] [Print] [Text view]

   1  .wp-block-columns {
   2  
   3      &:not(.alignwide):not(.alignfull) {
   4          clear: both;
   5      }
   6  
   7      .wp-block-column {
   8  
   9          > * {
  10              margin-top: calc(0.66 * var(--global--spacing-vertical));
  11              margin-bottom: calc(0.66 * var(--global--spacing-vertical));
  12  
  13              @include media(mobile) {
  14                  margin-top: var(--global--spacing-vertical);
  15                  margin-bottom: var(--global--spacing-vertical);
  16              }
  17  
  18              &:first-child {
  19                  margin-top: 0;
  20              }
  21  
  22              &:last-child {
  23                  margin-bottom: 0;
  24              }
  25          }
  26  
  27          &:last-child {
  28              margin-bottom: 0;
  29          }
  30      }
  31  
  32      .wp-block-column:not(:last-child) {
  33          margin-bottom: calc(0.66 * var(--global--spacing-vertical));
  34  
  35          @include media(mobile) {
  36              margin-bottom: var(--global--spacing-vertical);
  37          }
  38  
  39          @include media(desktop) {
  40              margin-bottom: 0;
  41          }
  42      }
  43  
  44      &.is-style-twentytwentyone-columns-overlap {
  45  
  46          justify-content: space-around;
  47  
  48          @include media(laptop) {
  49  
  50              .wp-block-column {
  51  
  52                  &:nth-child(2n) {
  53                      margin-left: calc(-2 * var(--global--spacing-horizontal));
  54                      margin-top: calc(2.5 * var(--global--spacing-horizontal));
  55                      z-index: 2;
  56  
  57                      // Provide text-based child blocks with a default background color to ensure they're readable.
  58                      > p,
  59                      > h1,
  60                      > h2,
  61                      > h3,
  62                      > h4,
  63                      > h5,
  64                      > h6,
  65                      > ul,
  66                      > ol,
  67                      > pre {
  68  
  69                          &:not(.has-background) {
  70                              background-color: var(--global--color-background);
  71                              padding: var(--global--spacing-unit);
  72                          }
  73                      }
  74  
  75                      // Lists should still have their usual left padding.
  76                      > ul:not(.has-background),
  77                      > ol:not(.has-background) {
  78                          padding-left: calc(2 * var(--global--spacing-horizontal));
  79                      }
  80  
  81                      &.is-vertically-aligned-center {
  82                          margin-top: 0;
  83                      }
  84                  }
  85              }
  86          }
  87      }
  88  
  89      &.alignfull {
  90  
  91          .wp-block-column {
  92  
  93              p:not(.has-background),
  94              h1:not(.has-background),
  95              h2:not(.has-background),
  96              h3:not(.has-background),
  97              h4:not(.has-background),
  98              h5:not(.has-background),
  99              h6:not(.has-background) {
 100                  padding-left: var(--global--spacing-unit);
 101                  padding-right: var(--global--spacing-unit);
 102              }
 103          }
 104      }
 105  }