.full-width-content:nth-child(2n +1) {
    background-color: var(--background-full-alternate);
}
.full-width-content:nth-child(1) {
    position: relative;
   
    & .content-text{
        position: absolute;
        width: 600px;
        max-width:calc(100% - 2.1rem);
        height: 100%;
        top: 0;
        left: calc(45vw - var(--site-max-width) / 2);
        @media screen and (max-width: 1380px) { left: 1rem }
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        color: #FFF;
        font-size: 1rem;
        @media screen and (max-width: 800px) {  font-size: 0.8rem; }
    }
    
    & h1, h2 {
        font-weight: 600;
        text-transform: uppercase;
        margin: 0;
        font-size: 2.5em;
        text-shadow: 2px 2px 10px #000000, 0 0 20px #000, 0 0 40px #000;
      
    }
    & h2{ font-weight: 500; font-size: 1.2em;}
}
/* UL: horizontal row */
.artistHerowImagesrapper{
  display:flex;
  flex-wrap:nowrap;
  overflow:hidden;
  width:100%;
  margin:0; padding:0; list-style:none;
  z-index: 1;
  & li{
        flex:0 0 100%;
        aspect-ratio:4/1;
        @media (max-width: 900px) { aspect-ratio:  4 / 2;};
        @media (max-width: 600px) {aspect-ratio:  4 / 3;}
        position:relative;
        overflow:hidden;
        min-height:0;
    }
    & li > picture{
        position:absolute;
        inset:0;             /* top/right/bottom/left = 0 */
        width:100%;
        height:100%;
        display:block;
    }
    & li > picture > img{
        width:100% !important;
        height:100% !important;    /* override img{height:auto} */
        max-width:none;            /* avoid weird constraints */
        object-fit:cover;
        object-position: top;      /* anchor cropping to the top of the image */
        display:block;
        pointer-events:none;
        user-select:none;
        }

}

.filterart-top-title-num {
        grid-area: numerator;
        font-size: 1.4rem;
        padding: 0 0 10px 0;
        font-weight: 600;
        margin: 1rem 0;
        & .items-num-holder {
            font-size: 0.7em;
        }
    }

.grid-article{
    margin: 1.5em 0;
    display: grid;
    gap:4em;
    grid-template-columns: 1fr .5fr;
    @media screen  and (max-width:1100px) {
         grid-template-columns: 1fr .7fr;
     };
    @media screen  and (max-width:870px) {
        grid-template-columns: 1fr;
         gap:2em;
    }
    & > *{
        min-width: 250px;
    }
    & h1{
        margin: 0 0 .5em 0;
        font-weight: 600;
        font-size: 1.8em;
    }
     h2{
        margin: 0 0 1em 0;
        font-weight: 500;
        font-size: 1.5em;
    }
    & *[itemprop="caption"]{
        font-size: 0.9em;
        font-style: italic;
        color: #555;
        
    }
    & picture{
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: 0;
    }
    & .text{ margin: 1em 0; font-size: 1rem; line-height: 1.6;}
    

}
.sidebar-article{
    & h4{
        margin: 0 0 2em 0;
        font-size: 1.4em;
        font-weight: 600;
    }
    & ul{
        list-style: none;
        margin: 0; padding: 0;
        display: block;
    }
    & ul li{
        display: block;
        margin: 1em 0;
       
    }
    & ul li a{
        text-decoration: none;
        color: inherit;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1em;
        
        align-items: center;
    }
    & ul li a:hover{
        text-decoration: underline;
        background-color: rgb(245, 247, 248);
    }
    & ul li span.title{
        margin-top: 0.5em;
        font-size: 1em;
        font-weight: 500;
        font-size: 1.1em;
    }
    & ul li .image-wrapper{
        
        height: 7.5em;
         @media screen and  (max-width: 600px) {
            height: 6em;
            
        }
       
        aspect-ratio: 4/3;
        position: relative;
        overflow:hidden;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        min-height:0;
    }
    & ul li .image-wrapper img{
        inset:0;             /* top/right/bottom/left = 0 */
        width:100%;
        height:100%;
        display:block;
        object-fit:cover;
        object-position: top;      /* anchor cropping to the top of the image */
    
    }
}