.full-width-content:nth-child(1) {
    position: relative;
   
    & .content-text{
        position: absolute;
        width: 400px;
        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;
        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-view{
    display: grid;
    grid-template-areas:
        "sorters-block sorters-block"
        "filters-block resultBlock"
        "filters-block paganation";
    gap: 1rem;
    grid-template-columns: 260px auto;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    @media screen and (max-width:760px) {
		grid-template-areas:
			"sorters-block"
			"filters-block"
			"resultBlock"
			"paganation";
		grid-template-columns: 1fr;
		grid-template-rows: repeat(8, auto);
	}

    & .sorters-block{
        grid-area: sorters-block;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 1em;
        @media screen and (max-width: 550px) {
			font-size: 0.83rem;
		};
		@media screen and (max-width: 450px) {
			font-size: 0.9rem;
			gap: 0.2em;
			justify-content: flex-start;
			flex-direction: column;
			align-items: flex-start;
			
		};
        & .sort-title {
            padding: 5px;
            width: auto;
            text-transform: uppercase;
        }
        & .sort-continer {
            position: relative;
            & .sort_selected {
                border-bottom: solid 1px rgba(0, 0, 0, 1);
                cursor: pointer;
                padding: 5px 5px 5px 10px;
                text-align: left;
                text-transform: uppercase;
			}
            & .sort-list {
                top: 100%;
                height: auto;
                z-index: 1;
                background-color: rgba(255, 255, 255, 1);
                border: solid 1px rgba(229, 229, 229, 1);
                box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.06);
                position: absolute;
            }
            & .sort_ {
                    padding: 10px 5px 0px 10px;
                    cursor: pointer;
                }
            & .sort_artists {
                    padding: 10px 5px 0px 10px;
                    cursor: pointer;
                }
         }
         & .per-page-container {
            position: relative;
            & .per-page-selected {
                text-transform: uppercase;
                border-bottom: solid 1px rgba(0, 0, 0, 1);
                cursor: pointer;
                padding: 5px 10px;
            }
            & .top_per_page_artworks {
                    font-weight: 600;
                }
            & .items-per-page {
                width: 100%;
                position: absolute;
                top: 100%;
                height: auto;
                z-index: 1;
                background-color: rgba(255, 255, 255, 1);
                border: solid 1px rgba(229, 229, 229, 1);
                box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.06);
            }
            & .per_page_artist {
                    padding: 10px 5px 0px 10px;
                    cursor: pointer;
                }
         }
       
    };
    & .filters-block{
        grid-area: filters-block;
        padding: 0;
        margin: 0;
        min-height: 100px;
        box-sizing: border-box;
    };
    & .resultBlock{
        grid-area: resultBlock;
        padding: 0;
        margin: 0;
        position: relative;
        min-height: 100px;
        box-sizing: border-box;
    };
    & .pagination-holder{
        grid-area: paganation;
        min-height: 100px;
    }
}

.resultBlock > ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    height: auto;
    @media screen and (max-width: 800px) {gap:2.3rem};
    & * {box-sizing: border-box;}
    & li {
        margin: 0;
        padding: 20px 0;
        list-style: none;
        flex: 1 1 100%;
        height: auto;
        width: 100%;
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 1rem;
        @media screen and (max-width: 800px) {
            gap: .5rem;
            grid-template-columns: 1fr;
        }
		&:first-child {
		  padding: 0 0 20px 0;
		}
        & .pre{
             text-align: center;
             display: flex;
             justify-content: center;
             align-items: center;
        }
        &  a{  
            text-decoration: none; 
            color: var(--font_color_main ); 
            align-self: flex-start;
        }
        & .pre a {
            width: 100%;
            max-width: 120px;
            aspect-ratio: 1/1;
            text-decoration: none;
            display: block;
            align-self: flex-start;
            & img{ 
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.3s ease;
                &:hover { transform: scale(1.2); }
            }
            border-radius: 50%;
            overflow: hidden;
       }
       & .post{
        width: 100%;
        min-height: 50px;
        display: flex;
        flex-direction: column;
        position: relative;
        & > * {
            flex: 1 1 100%;
            
        }
        & div[itemprop="name"] {
            font-weight: 600;
            font-size: 1.2em;
            text-transform: uppercase;
        }
        & p {
            padding: .1em 0;
            margin: 0;
        }

        & .imageView{
            display: flex;
            flex-direction: row;
            max-width: 100%;
            gap: 0.16em;
            
            & > div{
                flex: 0 0 calc( 33.33% - .08em);
                height: auto;
                overflow: hidden;
                aspect-ratio: 1.8 / 1;
                @media screen and (max-width: 600px) {
                    aspect-ratio: 1.2 / 1;
                }
                 @media screen and (max-width: 400px) {
                    aspect-ratio: 1 / 1;
                }
                & img{ 
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
            }
        }

       }

    }
    & user-likeheckbox{
        position: absolute;
        top: 0;
        right: 0;
        
    }
}

.filter-item{
	border-bottom: solid 1px rgba(0,0,0,1);
	cursor: pointer;
	font-size: 0.9em;
	padding: 10px 0;
	font-weight: 600;
	text-transform: uppercase;
	width: 90%;
	& span{
		float: right;
	}
}

.artist-filters{
	& .filter-item{
		border-bottom: solid 1px rgba(0,0,0,1);
		cursor: pointer;
		font-size: 0.9em;
		padding: 10px 0;
		font-weight: 600;
		text-transform: uppercase;
		width: 90%;
		& span{
			float: right;
		}
	}
	& form{
		& .filter-area{
			margin-top: 10px;
			border-bottom: solid 1px #ddd;
			width: 90%;
			& .filter-container{
				max-height: 250px;
				overflow-y: auto;
				width: 100%;
				& .filter-block{
					padding: 5px 0;
					width: 100%;
					& .filter-block-filter{
						display: flex;
						align-items: center;
						gap: 8px;
						cursor:pointer;
						& .filter-checkbox-filter{
							width: 23px;
							height: 23px;
							flex-shrink: 0;
							accent-color: #000;
						}
						& a{
							display: inline;
							color: black;
							text-decoration: none;
						}
					}
				}
			}
		}
	}
}