examples in code
styles.css
`/ two cols page layout /
:is(.blog, .two-columns) main {
display: grid;
grid-template-columns: 100%;
max-width: calc(var(--max-content-width) + var(--default-content-gap) 2); / max size up due to how the two column template pulls in section containers that already have default margins */
margin: 0 auto;
}
:is(.blog, .two-columns) main .section.hero-container ~ .section:last-of-type {
grid-row: 3;
}
/ Temporary fix so Contact Us page's secondary highlight background color doesn't fill height of accordion container /
:is(.two-columns) main .section.accordion-container {
grid-row: span 2;
}
Once task https://github.com/hlxsites/elixirsolutions/issues/235 is complete review the code to remove two column template coding.
examples in code styles.css `/ two cols page layout / :is(.blog, .two-columns) main { display: grid; grid-template-columns: 100%; max-width: calc(var(--max-content-width) + var(--default-content-gap) 2); / max size up due to how the two column template pulls in section containers that already have default margins */ margin: 0 auto; }
@media (min-width: 56.25em) { :is(.blog, .two-columns) main { grid-template-columns: 1fr 33%; }
:is(.blog, .two-columns) main .section { grid-column: 1; }
:is(.blog, .two-columns) main .section.hero-container { grid-row: 2; grid-column: 1 / -1; }
:is(.blog, .two-columns) main .section:last-of-type { grid-row: 2; grid-column: 2; padding-inline: 0; }
:is(.blog, .two-columns) main .section:is(.secondary-highlight, .highlight):last-of-type { padding-inline: var(--default-content-gap); margin-block-start: var(--default-content-gap); margin-block-end: var(--default-content-gap); }
:is(.blog, .two-columns) main .section.hero-container ~ .section:last-of-type { grid-row: 3; }
/ Temporary fix so Contact Us page's secondary highlight background color doesn't fill height of accordion container / :is(.two-columns) main .section.accordion-container { grid-row: span 2; }
} `