Spacing with column layout

index.html

<section class="container">
  <h1>Spacing with column layout</h1>
  <article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure ratione dolor et quas modi aut aperiam accusantium, 
    commodi nisi facere libero reprehenderit ducimus nemo amet dolores recusandae harum architecto. Minima et explicabo similique. 
    Qui itaque praesentium dignissimos aperiam tenetur quod ex natus modi, possimus voluptatem exercitationem iste non dolorum at 
    corporis nostrum beatae debitis fugiat? Beatae, ducimus! Omnis consequuntur, quos officiis doloribus assumenda libero debitis 
    impedit pariatur cupiditate quasi amet aspernatur incidunt nihil suscipit possimus similique sed dolore veniam deserunt molestiae 
    facilis ipsam eius tempore. Tenetur iste atque assumenda eos similique a ipsam. Molestias nihil officiis necessitatibus temporibus 
    harum eos?
  </article>
</section>

style.css

:root {
  --spacing: 1rem;
}

.container {
  min-height: 100%;
  border: 16px ridge #ff6550;
  background: #ffe7e7;
  padding: var(--spacing);
}

article {
  width: 80%;
  max-width: 1200px;
  position: absolute;
  top: 51.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  columns: 4 150px;
  column-gap: calc(var(--spacing) * 4);
}

/* ===================== */
/*==== OTHER STYLES ==== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: sans-serif;
  color: #262626;
}

h1 {
  font-weight: 900;
  font-size: 42px;
  text-align: center;
}

@media (max-width: 480px) {
  h1 {
    font-size: 30px;
  }

  article {
    transform: translate(-50%, -40%);
  }
}