@layer vendor {
  .block--columns {
    .block--columns__columns {
      display: grid;
      grid-template-columns: 1fr;

      /* TODO: Improve this, currently 768px will try to place 4 columns next to each other */
      @media (min-width: 768px) {
        &[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
        &[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
        &[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
      }
    }
  }
}