.blog{.page-heading h1 { grid-column: 1 / 13; } &.thoughtLeadership small { color: var(--colour-2); } &.community small { color: var(--colour-6); } &.funTech small { color: var(--colour-4); } &.dailyFuzz small { color: var(--colour-1); } &.cortexCulture small { color: var(--colour-8); } &.techDeepDive small { color: var(--colour-9); }}small{&.thoughtLeadership { color: var(--colour-2); } &.community { color: var(--colour-6); } &.funTech { color: var(--colour-4); } &.dailyFuzz { color: var(--colour-1); } &.cortexCulture { color: var(--colour-8); } &.techDeepDive { color: var(--colour-9); }}.blogs-container{display:grid;gap:var(--gg)var(--gg);grid-template-columns:1fr;margin-bottom:var(--hspace-xs);@media(min-width:56.25em){grid-template-columns: repeat(12,1fr); grid-template-rows: auto; grid-auto-flow: row dense; margin-bottom: var(--hspace-s-l);}section { a { color: var(--white); display: flex; flex-direction: column; text-decoration: none; &:hover p { text-decoration: underline; text-decoration-thickness: 1px; } } .banner-text * { margin-bottom: 0; } img { aspect-ratio: 2 / 1; border-radius: .5rem; height: 100%; max-width: 100%; object-fit: cover; width: 100%; } &.bg-banner { a { position: relative; } img { max-height: 22.5rem; } .banner-text { margin: calc(2rem/2); padding: calc(var(--gg)/2); position:absolute; &.right { max-width: 60%; right:0; bottom:0; top:0; } &.bottom { bottom:0; } &.left { max-width: 60%; width: auto; left:0; bottom:0; top:0; } } } &.banner { .banner-text { font-size: var(--font-size-5); margin-top: .25rem; } img { max-height: 18.75rem; min-height: 14.19rem; } } } @media (min-width: 56.25em) { section:first-of-type { grid-column: span 7; a { height: 100%; } } section:nth-of-type(2) { grid-column: span 5; a { height: 100%; } img { flex-grow: 1; } } section { grid-column: span 6; } } @media (min-width: 75em) { section:first-of-type { grid-column: span 8; } section:nth-of-type(2) { grid-column: span 4; } section { grid-column: span 3; } }}.paging{display:flex;font-family:dm mono;font-size:var(--font-size-6);font-weight:400;gap:1.5rem;grid-column:1/-1;list-style-type:none;margin:0;padding:0;li { margin:0; padding: 0; } a {text-decoration: none; color: var(--colour-2); &:hover { color: var(--colour-3); } &.selected { color: var(--colour-1); cursor: default; } }}