Rework layout using grid

[hasancruk]

https://codepen.io/hexagoncircle/pen/dyejrpE

.content {
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(50ch, 100% - var(--gap) * 2);
  --popout: minmax(0, 2rem);
  --feature: minmax(0, 5rem);

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [feature-start] var(--feature)
    [popout-start] var(--popout)
    [content-start] var(--content) [content-end]
    var(--popout) [popout-end]
    var(--feature) [feature-end]
    var(--full) [full-end];
}

.content > * {
  grid-column: content;
}

.popout {
  grid-column: popout;
}

.feature {
  grid-column: feature;
}

.full {
  grid-column: full;
}

So you can have flat HTML like this

<div class="content">
  <div>Content</div>
  <div class="popout">Popout</div>
  <div>Content</div>
  <div>Content</div>
  <div class="feature">Feature</div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
  <div class="full">Full</div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
</div>