CMO Insider

.gi-cmoi body {
overflow-x: hidden;
}

.gi-cmoi .insider-raw-embed {
overflow-x: visible !important;
}

.gi-cmoi #gi-cmoi-grid {
display: flex;
gap: 2.25rem;
flex-direction: column;
}

.gi-cmoi #gi-cmoi-feature {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}

.gi-cmoi #gi-cmoi-feature .gi-cmoi-grid-article {
display: block;
}

.gi-cmoi #gi-cmoi-feature .gi-cmoi-grid-image-container {
aspect-ratio: 2;
}

.gi-cmoi #gi-cmoi-feature .gi-cmoi-grid-image {
height: auto;
object-fit: initial;
}

.gi-cmoi .typography #gi-cmoi-feature .gi-cmoi-kicker {
margin: 15px 0 0 0;
}

.gi-cmoi .post-content h2 {
text-align: center;
}

.gi-cmoi .post-content .gi-cmoi-grid-link {
display: block;
position: relative;
width: 100%;
max-width: 1230px;
box-shadow: initial;
margin: 0;
text-decoration: none;
}

.gi-cmoi .post-content .gi-cmoi-grid-link:hover {
box-shadow: initial;
}

.gi-cmoi .post-content .gi-cmoi-grid-link:hover .gi-cmoi-grid-hed {
color: var(–blue, #007bff);
text-decoration: underline;
text-decoration-skip-ink: auto;
text-decoration-color: var(–blue, #007bff);
}

.gi-cmoi .gi-cmoi-grid-article {
position: relative;
display: flex;
gap: 1rem;
align-items: start;
}

.gi-cmoi .gi-cmoi-grid-image-container {
aspect-ratio: 1;
overflow: hidden;
flex: 2;
}

.gi-cmoi .gi-cmoi-grid-image {
display: block;
margin: 0;
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;
}

.gi-cmoi-grid-text-container {
flex: 8;
}

.gi-cmoi .typography .gi-cmoi-grid-hed {
font-family: LabGrotesque, Helvetica, Arial, sans-serif;
font-weight: 900;
}

.gi-cmoi .typography .gi-cmoi-kicker {
font-family: LabGrotesque, Helvetica, Arial, sans-serif;
font-weight: 900;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1;
margin: 0;
color: var(–blue, #007bff);
}

.gi-cmoi .typography .gi-cmoi-grid-hed {
margin: 10px 0 0 0;
max-width: 100%;
font-size: 16px;
line-height: 1.5;
color: black;
transition: all 200ms ease;
}

@media (orientation: portrait) and (min-width: 768px) {
.gi-cmoi .gi-cmoi-grid-article {
align-items: center;
}
}

@media (orientation: landscape) {
.gi-cmoi #gi-cmoi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
justify-content: start;
align-items: start;
}

.gi-cmoi .gi-cmoi-grid-article {
display: block;
}

.gi-cmoi .gi-cmoi-grid-image-container {
aspect-ratio: 2;
}

.gi-cmoi .typography .gi-cmoi-kicker {
margin: 15px 0 0 0;
}
}

@media (min-width: 768px) {

.gi-cmoi #gi-cmoi-grid,
.gi-cmoi #gi-cmoi-feature {
padding: 0;
}

.gi-cmoi .gi-cmoi-main-hed {
font-size: 4rem;
}

.gi-cmoi .typography #gi-cmoi-feature .gi-cmoi-grid-hed {
font-size: 24px;
line-height: 1.3;
}

.gi-cmoi .typography #gi-cmoi-feature .gi-cmoi-kicker {
font-size: 14px;
}
}

@media (min-width: 1260px) {
.gi-cmoi #gi-cmoi-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
}

document.documentElement.classList.add(“gi-cmoi”);

if (document.querySelector(“.gi-cmoi”)) {
fetchAndRenderArticles()
}

async function fetchAndRenderArticles(){
try {
const res = await fetch(
“https://www.businessinsider.com/ajax/content-api/posts?filter[category]=cmo-2023-lp&page[limit]=100”
);

if (res.ok) {
const articles = await res.json();
const cmoiGridContainer = document.querySelector(“#gi-cmoi-grid”);
const cmoiFeatureContainer = document.querySelector(“#gi-cmoi-feature”);
const categoryTags = [
“cmo-2023-lp-category-innovation”,
“cmo-2023-lp-category-leadership”,
“cmo-2023-lp-category-insights-and-data”,
“cmo-2023-lp-category-talent”,
];

if (cmoiGridContainer) {
const cmoiGridArticles = articles.data.filter(
(article) =>
!article.attributes.categories.includes(“cmo-2023-lp-category-main-list”)
);
console.log(cmoiGridArticles);
let thumbnail = null;
cmoiGridArticles.forEach((article) => {
function whichThumbnail(thumbnailArr){
let thumbnail = thumbnailArr.filter((el)=>{
if(el.attributes.width % el.attributes.height
article.attributes.categories.includes(“cmo-2023-lp-category-main-list”)
);

if (cmoiFeatureArticle.length > 0) {
cmoiFeatureContainer.innerHTML += articleMarkup(
cmoiFeatureArticle[0].links.site,
cmoiFeatureArticle[0].relationships.thumbnails.data[0].links.self,
cmoiFeatureArticle[0].relationships.thumbnails.data[0].attributes
.description,
cmoiFeatureArticle[0].attributes.title,
“Leadership”
);
}
}
} else {
throw new Error(
“Failed to create article grids, something went wrong fetching articles”
);
}
} catch (err) {
console.error(err);
}
}

function articleMarkup(articleLink, image, alt, hed, kicker = “cmo insider”) {
return `

${kicker}

${hed}

`;
}

function makeKicker(categories, categoryTags) {
const tag = categoryTags.find((element) => categories.includes(element));
if (tag) {
const finalTag = tag
.replace(“cmo-2023-lp-category-“, “”)
.replaceAll(“-“, ” “);
return finalTag;
} else {
return “cmo insider”;
}
}

.gi-credits {
font-size: 1rem;

}