.articolo__header { position: relative; background-position: right center; background-repeat: no-repeat; background-size: cover; overflow: hidden; &::before { position: absolute; content: ""; background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #ffffff47 75%, transparent); inset: 0; z-index: 1;} &::after{content: ""; position: absolute; inset: 0 0 0 50%; background-image: inherit; background-size: cover; background-position: center; z-index: 0;}}
.articolo__meta { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; z-index: 2; box-shadow: inset 0 -10px 10px -5px #0000000A;}
p.articolo__category { font-size: var(--fs-20); line-height: 1; margin: 0 0 calc(var(--space-2) / 2);}
h1.articolo__title { font-size: var(--fs-50); line-height: 1.2; margin: 0 0 var(--space-2); max-inline-size: 20ch; text-wrap: balance;}
h2.articolo__subtitle { font-size: var(--fs-30); line-height: 1.3; margin: 0 0 var(--space-2); max-inline-size: 30ch; text-wrap: balance;}
p.articolo__date { font-size: var(--fs-12); margin: 0; display: flex; align-items: center;}
span.material-symbols-outlined:not(.articolo__author-icon, .articolo__author-icon) { font-size: 1.3rem; }

/* SOCIAL */
.articolo__author-social-inner, .articolo__author, .articolo__share, .articolo__share-list, .articolo__share-head { display: flex; align-items: center; }
.articolo__author-social { display: grid; }
.articolo__author-social-inner { gap: var(--space-10); padding-block: var(--space-2); }
.articolo__author, .articolo__share-head { gap: calc(var(--space-2) / 3); }
.articolo__author { position: relative; &::after{ position: absolute; content: ""; background-color: #e6e6e6; height: 100%; width: 1px; right: calc(-1 * (var(--space-10) / 2));}}
.articolo__author-icon { font-size: 1.2rem; }
p.articolo__author-name, p.articolo__share-label { font-size: var(--fs-10); margin: 0;}
.articolo__share { gap: var(--space-2); }
.articolo__share-list { gap: calc(var(--space-1) / 2.5); }
a.articolo__share-link img, .containerSocialBlog a.linkSocial img { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(293deg) brightness(105%) contrast(101%);}
.articolo__share-link { display: flex; align-items: center; justify-content: center; padding: 7px; border-radius: 7px; width: 0.8rem; height: 0.8rem;}
.articolo__share-link:not(.articolo__share-link--linkedin) img { height: 1rem;}
.articolo__share-link--linkedin img{ height: 1.8rem; }

/* CONTENT */
.articolo__content-box { padding-top: var(--space-4); }
.articolo__content h2 { font-size: var(--fs-45); }
.articolo__content h2, .articolo__content h3, .articolo__content h4 { line-height: 1.2; color: var(--cobalt); margin: 0 0 var(--space-3);}
.articolo__content p { font-size: 17px; line-height: 1.7; color: var(--dimGray);}
.articolo__content > p:first-of-type { margin-top: 0; }
.articolo__content p a { text-decoration: none; color: var(--dimGray); }
.articolo__content ul { padding-left: calc(var(--space-2) / 1.5) }
.articolo__content h3 { font-size: var(--fs-35); line-height: 1.3; }
.articolo__content h4 { font-size: var(--fs-30); line-height: 1.1; }
.articolo__content :is(ul, ol, p):has(+ :is(h2, h3, h4)) { margin-bottom: var(--space-4); }
.articolo__content p > img { display: block; max-width: 100%; height: auto; }
.articolo__fonti { margin-top: var(--space-8); }
h2.articolo__fonti-title { font-size: var(--fs-30); margin: 0 0 var(--space-2);}
ul.articolo__fonti-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--space-1));}


/* SIDEBAR */
.articolo__sidebar-content { display: grid; gap: var(--space-8); border-top: 1px solid #e6e6e6; margin-bottom: var(--space-10) !important;}
.articolo__sidebar { padding-top: var(--space-4); }
.articolo__sidebar { position: relative; &::after{ position: absolute; content:""; width: 1px; height: 100%; background-color: #e6e6e6; top: 0; right: calc((-1 * var(--space-8) / 2));}}
.articolo__sidebar-inner { position: sticky; top: 9rem;}
.articolo__index-list { padding-left: calc(var(--space-2) / 2); margin-bottom: var(--space-4);}
p.articolo__index-title { font-size: var(--fs-15); margin: 0 0 var(--space-2); }
p.articolo__index-item { font-size: var(--fs-12); position: relative;}
p.articolo__index-item.active::before { content: ""; position: absolute; left: calc(-1 * var(--space-2) / 2); top: 0; width: 3px; height: 100%; background-color: var(--cobalt); z-index: 1;}
a.articolo__index-link { text-decoration: none; }
.articolo__sidebar-share { padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2);}
.articolo__sidebar-share-head { display: flex; align-items: center; gap: calc(var(--space-2) / 3); }
p.articolo__sidebar-share-label { font-size: var(--fs-10); margin: 0;}
.articolo__sidebar-share-list { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space-1) / 2.5); }

@media (max-width: 550px){

    /* HEADER */
    .articolo__meta { padding: 8vw;}
}
@media (min-width:551px) and (max-width: 766.9px){

    /* HEADER */
    .articolo__meta { padding: 10vw;}
}
@media (min-width:767px) and (max-width: 899.9px){

    /* HEADER */
    .articolo__meta { padding: 8vw;}
}
@media (max-width: 899.9px){

    /* HEADER */
    .articolo__header { background-image: none !important;}
    .articolo__header-mob { background-size: cover; height: 60vw; }
    .articolo__sidebar-content { grid-template-columns: 1fr; }
    .articolo__sidebar { display: none; }
}
@media (min-width: 900px) {

    /* AUTHOR */    
    .articolo__author-social-inner { grid-column: 2; }

    /* SIDEBAR */   
    .articolo__index-list { position: relative; &::before{position: absolute; content: ""; bottom: calc(-1 * var(--space-4)); background-color: #e6e6e6; height: 100%; width: 3px; top: 0; left: 0;} &::after{position: absolute; content: ""; background-color: #e6e6e6; height: 1px; width: 100%; bottom: calc(-1 * var(--space-4)); left: 0;}}
}
@media (min-width: 900px) and (max-width: 1099.9px){

    /* HEADER */
    .articolo__header { margin-right: calc((100vw - 84vw) / 2); }
    .articolo__meta { padding-left: calc((100vw - 84vw) / 2); }

    /* CONTENT */
    .articolo__author-social, .articolo__sidebar-content { grid-template-columns: 1fr 70%; }
}
@media (min-width: 900px) and (max-width: 1099.9px){

    .articolo__header { height: clamp(400px, 50vw, 500px); }
}
@media (min-width: 1100px){
    
    .articolo__header { height: clamp(300px, 40vw, 600px); }
    .articolo__author-social, .articolo__sidebar-content { grid-template-columns: 1fr 55% 1fr; }
    .articolo__content-box { position: relative; &::after{ position: absolute; content:""; width: 1px; height: 100%; background-color: #e6e6e6; top: 0; right: calc((-1 * var(--space-8) / 2));}}
}
@media (min-width: 1100px) and (max-width: 1400px){

    /* HEADER */
    .articolo__header { margin-right: 10vw; }
    .articolo__meta { padding-left: 10vw; }
}
@media (min-width: 1401px) {

    /* HEADER */
    .articolo__header { margin-right: calc((100vw - min(80vw, 1200px)) / 2); }
    .articolo__meta { padding-left: calc((100vw - min(80vw, 1200px)) / 2); }
}