.wp-block-columns {

  &:not(.alignwide):not(.alignfull) {
    clear: both;
  }


  .wp-block-column {

    &:not(:first-child) {
      @include media(mobile) {

        margin-left: var(--global--spacing-horizontal);


      }
    }

  }


  .wp-block-column {

    > * {
      margin-top: 0;
      margin-bottom: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .wp-block-column:not(:last-child) {
    margin-bottom: calc(0.66 * var(--global--spacing-vertical));

    @include media(mobile) {
      margin-bottom: var(--global--spacing-vertical);
    }

    @include media(desktop) {
      margin-bottom: 0;
    }
  }

  &.is-style-canvi-columns-overlap {

    justify-content: space-around;

    @include media(laptop) {

      .wp-block-column {

        &:nth-child(2n) {
          margin-left: -50px;
          margin-top: calc(2.5 * var(--global--spacing-horizontal));
          z-index: 2;

          // Provide text-based child blocks with a default background color to ensure they're readable.
          > p,
          > h1,
          > h2,
          > h3,
          > h4,
          > h5,
          > h6,
          > ul,
          > ol,
          > pre {

            &:not(.has-background) {
              background-color: inherit;
              padding: var(--global--spacing-unit);
            }
          }

          // Lists should still have their usual left padding.
          > ul:not(.has-background),
          > ol:not(.has-background) {
            padding-left: calc(2 * var(--global--spacing-horizontal));
          }

          &.is-vertically-aligned-center {
            margin-top: 0;
          }
        }
      }
    }
  }

  &.alignfull {


  }

  &.has-background {

    padding: var(--global--spacing-unit);

  }
}