.paintingGrid{
    width: 100%;
    display: grid;
    gap: 1rem 1rem;
    grid-template-columns: 3fr 2fr ;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
    'breadcrumbs breadcrumbs'
    'media title'
    'media cart'
    'media share'
    'media other'   
    'description resources';
    box-sizing: border-box;
    mask-repeat: auto-fill;
    margin: 0;
    
}
.gItem:nth-child(1){
    grid-area: breadcrumbs;
} 
 
.gItem:nth-child(2){
    grid-area: title;
    align-self: start;
}   
.gItem:nth-child(3){
    grid-area: media;
}
.gItem:nth-child(4){
    grid-area: cart;
    align-self: start;
}
.gItem:nth-child(5){
    grid-area: description;
}
.gItem:nth-child(6){
    grid-area: resources;
}
.gItem:nth-child(7){
    grid-area: share;
    align-self: start;
}
.gItem:nth-child(8){
    grid-area: other;   
    align-self: start;
}

@media screen and (max-width: 800px) {
    .paintingGrid{
        grid-template-columns: 100%;
        grid-template-areas: 
        'breadcrumbs'
        'title'
        'media'
        'cart'
        'other'
        'description'       
        'resources'
        'share'
        ;   
    } 
  
  	.gItem:nth-child(8){
        min-height: 10px;
    }
}   

.gItem{
    min-height: 3px;
    box-sizing: border-box;
    position: relative;
}


/* painting resources box */
.resourcesBox{
    --resourceBoxLableHeight: 60px;
   
    width: 100%;
    
    height: auto;
    box-sizing: border-box;
    margin: 0;
    display: block;
    position: relative;
    border: 1px solid black;
}

.contentCube{
    width: 100%;   
    box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    display: block;
}
.resourcesBox input.selectRadio{
    display: none;
}

.resourcesBox label{
    display: list-item;
    width: 100%;
    /*min-height:  var(--resourceBoxLableHeight);*/
    height:  var(--resourceBoxLableHeight);
    border: 1px solid black;
    border-width: 1px 0 0;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: Left;
    padding: 0 1rem;
    list-style-type: none; 
    font-size: 1.2rem;
    font-weight: bold;
    position: relative;
}
.resourcesBox .selectRadio:checked ~ label{
    padding: 0 2.8rem;
}

.resourcesBox .content{
    padding: 0 1rem;
}
.resourcesBox  .selectRadio:checked ~ label::before {
        content: "\2022";
        font-size: 2.5rem;
        color: black; 
        position: absolute;
        left: 1rem;
        top: 46%;
        transform: translateY(-50%); /* Centers it vertically */
}
.resourcesBox .selectRadio:checked ~  .stage{
    height: var( --resourceBoxHeight);
    transition: height 0.5s ease-in-out;
}
.resourcesBox .contentCube .stage{
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out;

}

.sold .painting-gallery:not(.fullScreen)  .evetOverlay{
    background: url(https://www.we-artonline.com/images/sold.png) no-repeat left bottom ;
    background-size: 40%;
}

@media screen and (max-width: 800px) { 
  	#about .stage {
    	text-align:center;  
    } 
}