.article-a,.article-b{.page-content { @media (min-width: 56.25em) { display: grid; gap: 0 var(--gg); grid-template-columns: repeat(12,1fr); } > h4, > h3, > :where(p, ol, li) a { color: var(--colour-3); } } .hero { aspect-ratio: 16/9; max-height: 37.5rem; max-width: 100%; object-fit: cover; width: 100%; margin-bottom: var(--hspace-xs); @media (min-width: 56.25em) { grid-column: 1 / 13; margin-bottom: var(--hspace-s-l); } } .article-nav { display: flex; justify-content: space-between; margin-bottom: var(--hspace-xs); } figure { margin: var(--hspace-xs) 0; img { aspect-ratio: 3 / 2; max-height: 320px; max-width: 100%; min-height: 240px; object-fit: cover; width: 100%; } figcaption { font-size: var(--font-size-6); margin-top: .5rem; &::before { content: "Above: "; color: var(--colour-3); font-family: "DM Mono"; } @media (min-width: 56.25em) { margin-top: 1rem; } } @media (min-width: 56.25em) { grid-column: 2 / 12; margin: var(--hspace-s-l) 0; &:has(+ figure) { grid-column: 2 / 7; } + figure { grid-column: 7 / 12; } } } > ol, > ul { margin-left: 6%; } a { text-decoration: underline; } a.back, a.share { vertical-align: middle; text-decoration: none; &::before { display: inline-block; font-family: system-ui; font-size: 1.5rem; font-weight: 160; } } a:is(.back) { color: var(--white); &::before { content: "\2190"; margin-bottom: 2px; } &:hover { color: var(--colour-1); } } a.share { color: var(--colour-1); &::before { content: "\2191"; } &:hover { color: var(--white); } } &.thoughtLeadership { .page-content { > h4, > h3, > :where(p, ol, li) a { color: var(--colour-2); } } .page-tag a { color: var(--colour-2); } } &.community { .page-content { > h4, > h3, > :where(p, ol, li) a { color: var(--colour-6); } } .page-tag a { color: var(--colour-6); } } &.funTech { .page-content { > h4, > h3, > :where(p, ol, li) a { color: var(--colour-4); } } .page-tag a { color: var(--colour-4); } } &.dailyFuzz { .page-content { > h4, > h3, > :where(p, ol, li) a { color: var(--colour-1); } } .page-tag a { color: var(--colour-1); } } &.cortexCulture { .page-content { > h4, > h3, > :where(p, ol, li) a { color: var(--colour-8); } } .page-tag a { color: var(--colour-8); } } &.techDeepDive { .page-content { > h4, > h3, > :where(p, ol, li) a { color: var(--colour-9); } } .page-tag a { color: var(--colour-9); } }}