.banners-container{display:grid;gap:var(--gg)var(--gg);margin-bottom:var(--hspace-xs);@media(min-width:56.25em){grid-column: 1 / 13; grid-template-columns: 1fr; grid-template-rows: minmax(18.75rem,auto); grid-auto-rows: minmax(18.75rem,auto); grid-auto-flow: row dense; margin-bottom: var(--hspace-s-l);}&:has(section + section) { @media (min-width:56.25em) { grid-template-columns:repeat(2,1fr); } } section { background:var(--dark-3); color:var(--white); border-radius:.5rem; display:flex; flex-direction:column; min-height:14rem ; position:relative; a { color:var(--white); display:block; text-decoration:none; &:hover { text-decoration:underline; } } small { opacity:75%; } &.thoughtLeadership { background-color:var(--colour-5); } &.community { background-color:var(--colour-7); } &.funTech { background-color:var(--colour-4); a { color:var(--dark-2); } } &.dailyFuzz { background-color:var(--colour-11); } &.cortexCulture { background-color:var(--colour-8); a { color:var(--dark-2); } } &.techDeepDive { background-color:var(--colour-10); } &.banner { img { border-radius:.5rem .5rem 0 0; } a:has(img) { flex-grow:1; } &:has(.banner-text.top) { flex-direction:column-reverse; img { border-radius:0 0 .5rem .5rem; } } } &.bg-banner { min-height:18.75rem; a { display:flex; flex-direction:column; position:relative; height:100%; &:hover p { text-decoration:underline; text-decoration-thickness:1px; } } .banner-text { position:absolute; &.right { right:0; max-width:60%; } &.bottom { bottom:0; } &.top { top:0; } &.left { left:0; max-width:60%; width:auto; } } } .banner-text { margin:calc(2rem/2); padding:calc(var(--gg)/2); * { margin-bottom:0; } @media (min-width:75em) { padding:calc(2rem/2); margin:calc(2rem/2); } } img { aspect-ratio:2/1; border-radius:.5rem; height:100%; max-width:100%; object-fit:cover; width:100%; &.sticker { border-radius:0; margin:2rem; max-height:8.75rem; max-width:initial; object-fit:contain; width:auto; &.bottom { margin-top:auto; } &.right { margin-left:auto; } &.left { margin-right:auto; } &.top { margin-bottom:auto; } } } } @media (min-width:56.25em) { .cspan { grid-column:span 2; img { max-height:400px; } } .rspan { grid-row:span 2; } }}