.block.generic-listing>ul.generic-featured-list { display: grid; grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-columns: 1fr } .block.generic-listing>ul.generic-featured-list .featured-item-header,.block.horizfullwidthblock ul.generic-featured-list .featured-item-header { grid-template-rows: auto auto; grid-template-columns: 1fr; aspect-ratio: 16/8.25; grid-row: 1/2; grid-column: 1/1 } .block.generic-listing>ul.generic-featured-list article,.block.horizfullwidthblock ul.generic-featured-list article { grid-row: 2/3; grid-column: 1/1 } ul.generic-featured-list { margin-left: 0; padding-left: 0 } ul.generic-featured-list .featured-item { display: grid; background-color: #fff; margin: 0; margin-bottom: 0px !important; border: 1px solid #d4d4d4 } ul.generic-featured-list .featured-item:not(:first-child) h3 { padding-top: 5px; align-self: auto; } ul.generic-featured-list .featured-item .featured-item-header { width: 100%; aspect-ratio: 4/3; grid-column: 1/2; display: flex; flex-flow: column nowrap } ul.generic-featured-list .featured-item .featured-item-header img { flex: 1 1 100%; min-width: 100%; object-fit: cover } ul.generic-featured-list .featured-item article { display: flex; flex-flow: column nowrap; justify-content: flex-start; padding: .25rem; grid-column: 2/3 } ul.generic-featured-list .featured-item:not(:first-child) article>*:first-child { flex: 0 1 auto } ul.generic-featured-list .featured-item article h3 { font-size: 1.2em; line-height: 1.2em; font-weight: 900 } ul.generic-featured-list .featured-item article a { color: #000f9f !important } ul.generic-featured-list .featured-item article .article-date { color: #333; font-weight: 700; align-self: end; } ul.generic-featured-list .featured-item:first-child { grid-template-rows: auto auto; grid-template-columns: 1fr } ul.generic-featured-list .featured-item:first-child .featured-item-header { aspect-ratio: 16/8.25; grid-row: 1/2; grid-column: 1/1 } ul.generic-featured-list .featured-item:first-child article { grid-row: 2/3; grid-column: 1/1 } ul.generic-featured-list .featured-item:first-child article h3 { font-size: 1.6em } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item,.block.horizfullwidthblock ul.generic-featured-list .featured-item { grid-template-columns: 50% 50% } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item .featured-item-header,.block.horizfullwidthblock ul.generic-featured-list .featured-item .featured-item-header { grid-column: 1/2; grid-row: 1/1 } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item article,.block.horizfullwidthblock ul.generic-featured-list .featured-item article { justify-content: center; grid-row: 1/1; grid-column: 2/3; padding: .5rem } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item:first-child,.block.horizfullwidthblock ul.generic-featured-list .featured-item:first-child { grid-template-rows: auto auto; grid-template-columns: 1fr } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item:first-child .featured-item-header,.block.horizfullwidthblock ul.generic-featured-list .featured-item:first-child .featured-item-header { aspect-ratio: 16/8.25; grid-row: 1/2; grid-column: 1/1 } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item:first-child article,.block.horizfullwidthblock ul.generic-featured-list .featured-item:first-child article { grid-row: 2/3; grid-column: 1/1 } @media(min-width: 576px) { ul.generic-featured-list .featured-item:not(:first-child) article>*:first-child { flex: 0 1 auto; display: grid; height: 100%; grid-template-rows: 75% 25%; } .container.vert .block.generic-listing>ul.generic-featured-list,.block.horizfullwidthblock ul.generic-featured-list { grid-template-columns:repeat(3, 1fr) } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item,.block.horizfullwidthblock ul.generic-featured-list .featured-item { grid-template-columns: 1fr; grid-template-rows: auto 1fr } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item .featured-item-header,.block.horizfullwidthblock ul.generic-featured-list .featured-item .featured-item-header { grid-row: 1/2; grid-column: 1/2 } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item article,.block.horizfullwidthblock ul.generic-featured-list .featured-item article { min-width: 100%; padding: .5rem; grid-row: 2/3; grid-column: 1/2 } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item:first-child,.block.horizfullwidthblock ul.generic-featured-list .featured-item:first-child { grid-area: span 1/span 3; grid-template-columns: 1fr 33% } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item:first-child .featured-item-header,.block.horizfullwidthblock ul.generic-featured-list .featured-item:first-child .featured-item-header { grid-column: 1/2; grid-row: 1/1 } .container.vert .block.generic-listing>ul.generic-featured-list .featured-item:first-child article,.block.horizfullwidthblock ul.generic-featured-list .featured-item:first-child article { justify-content: center; grid-row: 1/1; grid-column: 2/3; padding: 1.5rem } } @media (max-width: 575px) { ul.generic-featured-list .featured-item:not(:first-child) { display: block; } }