How can I add space to the top and bottom of each column?

Question

I'm trying to use a flexible CSS Multicolumn layout to make my website look better on wide and ultrawide screens. I am using colored boxes behind the text and everything looks good except:

As you can see, where the text overflows into the next column, it is immediately up against the edge of the text box, which is quite visible due to its different colour.

Padding obviously doesn't help here, since that would only affect the top of column 1 and the bottom of column 3. Is there a good way to automatically add some space at the beginning and end of each column, without taking away the responsivity of the layout?

Shortened HTML and CSS:

.writing .grid-item-dark,
.writing .grid-item {
  break-inside: auto;
}

.writing .grid-item-dark p, .writing .grid-item p {
  font-family: "EB Garamont", serif;
  color: #e8fcfc;
  font-size: 19px;
  padding: 0 15px; 
  margin: 15px 0;
  line-height: 140%;
  letter-spacing: 1px;
}

.writing .grid-item-dark h1,
.writing .grid-item-dark h2,
.writing .grid-item-dark h3,
.writing .grid-item h1,
.writing .grid-item h2,
.writing .grid-item h3 {
  font-family: "EB Garamond", serif;
  color: #e8fcfc;
  font-weight: 600;
  text-transform: none;
  break-after: avoid;
}

.writing .grid-item-dark h1,
.writing .grid-item h1 {
  font-size: 40px;
  padding: 30px 30px;
}

.writing .grid-item-dark h2,
.writing .grid-item h2 {
  font-size: 28px;
  padding: 20px 15px; 
}

.writing .grid-item-dark h3,
.writing .grid-item h3 {
  font-size: 25px; 
  padding: 20px 15px 10px 15px; 
}

.grid-items {
  padding: 3%; 
  column-count: 1;
  column-gap: 0;
}

.grid-item-dark {
  background-color: #1c1c1ca3;
  margin-top: 1.5rem;
}

/* As an example for responsive layout: */

@media (min-width: 2400px) {
  .grid-items {
      column-count: 3;
      column-gap: 4%;
  }
  .grid-items > div {
      padding: 20px;
  }
}

<main class="content">
    <div class="grid-items">
        <div class="grid-item">
            <div class="main_heading" id="main_heading">
                <h1>Text</h1>
            </div>
        </div>

        <div class="writing">
            <div class="grid-item-dark">
                <h1>Chapter 1</h1>
                <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
            </div>
        </div>

    </div>
</main>

I've tried the obvious: padding and margins, but clearly, those don't help here. I could also use break-inside: avoid each paragraph but would prefer not to do that, as it forces me to use very short paragraphs.