// Core/columns block
// Loops to enumerate the classes for columns.
.wp-block-column > p:first-child {
  margin-top: 0;
}

h1,
h2,
h3 {
  + .wp-block-columns {
    margin-top: 0;
  }
}

@for $i from 1 through 9 {
  .wp-block-columns.has-#{$i}-columns.alignfull {
    padding-left: var(--spacing-container-padding-inline);
    padding-right: var(--spacing-container-padding-inline);
    width: 100%;
  }

  .wp-block-columns.has-#{$i}-columns {
    @media (max-width: 900px) {
      display: grid;
      grid-gap: 1em;
      grid-template-columns: repeat($i, 1fr);
      width: 100%;

      .wp-block-column {
        margin: 0;
        width: 100%;
      }
    }

    @media (max-width: $container-mobile) {
      grid-template-columns: repeat(1, 1fr);
    }
  }
}