main {
    display: flex;
    flex-direction: column;
    align-items: center;
}
article {
    margin-top: 1rem;

    --padding-size: 1rem;
    --breakout-max-width: 120ch;
    --content-max-width: 80ch;

    --full-width-size: minmax(var(--padding-size), 1fr);
    --breakout-size: calc(
        (var(--breakout-max-width) - var(--content-max-width)) / 2
    );
    --content-size: min(
        100% - (var(--padding-size) * 2),
        var(--content-max-width)
    );

    display: grid;
    grid-template-columns:
        [full-width-start] var(--full-width-size)
        [breakout-start] minmax(0, var(--breakout-size))
        [content-start] var(--content-size) [content-end]
        minmax(0, var(--breakout-size)) [breakout-end]
        var(--full-width-size) [full-width-end];
    min-height: calc(100vh - var(--footer-height) - var(--header-height));
}
article > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
    grid-column: content;
}

article > .breakout,
.full-width > .breakout {
    grid-column: breakout;
}

article > .full-width {
    grid-column: full-width;

    display: grid;
    grid-template-columns: inherit;
}
.full-width > * {
    margin: 0 auto;
}

.bg-primary {
    background: var(--accent-color);
    font-weight: bold;
    color: white;
}
.call-to-action {
    padding: 1rem;
    background: var(--bg-color);
    color: white;
}

@media only screen and (max-width: 724px) {
    article {
        --padding-size: 1rem;
    }
}
article a {
    color: var(--accent-color);
    text-decoration: underline;
}
article a:hover {
    color: var(--accent-hover-color);
}
article h1 {
    text-align: center;
    font-size: 2rem;
    padding: 1rem 0;
}
article h2 {
    font-size: 1.5rem;
    padding: 1rem 0;
}
article p {
    text-indent: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
article ul {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 40px;
}
.tags-wrap {
    background: var(--bg-color);
    padding: 1rem 20px;
    max-width: 1440px;
    margin: 0 auto;
}
.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

.tag {
    font-size: 0.8rem;
    border-radius: 2.5rem;
    background-color: #77777730;
    padding: 0.2rem 1rem;
}