:root {
    --block-width: 309px;
}


.block > * {
    border-left: none;
    border-right: none;
    background-color: transparent;
    box-shadow: none;
}
.osnPart{
	box-shadow: none;
}
.bodyOsnBlock > div{
	background-color: transparent !important;
}
.page2 .block2 > div{
	background-color: transparent;
}

.project-picker>div {
    padding: 15px;
    background-color: #fbfbfb;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #fbfbfb;
    border-bottom: 1px solid #fbfbfb;
    box-shadow: 0 0 24px rgb(142 78 199 / 20%);
}
.block2 .items>* .img{
	background-size: 100% 100%;
	transition: .25s ease all;
	border-radius: 5px 5px 0 0;
	width: calc(var(--block-width)) !important;
	height: calc(calc(var(--block-width)) * 1.45) !important;
    box-sizing: content-box;
    overflow: hidden;
    position: relative;
}
.block2 .items>* .img:hover {
    background-size: 105% 105%;
}
.block2 .img-background{
    background-size: cover;
    background-position: center center;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    transition: 150ms transform;
    transform: scale(1);
    will-change: transform;
}
.block2 a:hover .img-background{
    transform: scale(1.01);
}
.block2 .items > * .img .hover{
    transition: opacity ease .15s;
}
.block2 .zag{
	display: none;
}
.block2 .items {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--block-width) );
    grid-gap: 1rem;
    justify-content: space-between;
}
.block2 > div{
	padding-left: 0px;
	padding-right: 0px;
}

.block2 .items>a {
    max-width: var(--block-width);
    border-radius: 5px;
    background-color: #fbfbfb;
    box-shadow: 0 0 20px rgb(142 78 199 / 20%);
    transition: .3s ease box-shadow;
}
.block2 .items>a:hover{
    box-shadow: 0 0 20px rgb(142 78 199 / 40%);   
}
.block2 .items>* .name{
	color: #843dc2;
	font-size: 15px;
}
.block2 .items>a .item-card {
    padding: .5em 1.5em 1em 1.5em;
}

.block2 .items>* .name {
    font-size: 15px;
    font-family: 'Roboto Light', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #843dc2;
}
.block2 .items>* .opis {
    font-size: 13px;
    font-family: 'Roboto Light', sans-serif;
}

.block2 .items > *:hover {
    text-decoration: none !important;
}

@media screen and (max-width: 350px){
    :root {
        --block-width: 250px;
    }
}
@media screen and (min-width: 900px){
    .block2 .items > a{
        margin-right: 0px;
        margin-bottom: 0px;
    }
}
@media screen and (max-width: 900px){
    .page2 .block2 .items > a{
        width: calc(var(--block-width) - 10px);
    }
    :root {
        --block-width: 290px;
    }

    .block2 .items {
        justify-content: space-around !important;
        align-items: flex-start;
        grid-gap: 0rem;
    }
    .block2 .items>* .img {
        width: calc(var(--block-width) - 10px) !important;
        height: calc(calc(var(--block-width) - 10px) * 1.45) !important;
    }
}
@media screen and (max-width: 700px){
    .block2 .items {
        justify-content: center !important;
    }
}

.dark .project-picker > div {
    background-color: #3d2454;
    border-top: 1px solid #4b2c67;
    border-bottom: 1px solid #4b2c67;
}
.dark .block2 .items>a{
    background-color: #3d2454;
}
.dark .block2 .items>* .name{
    color: white;
}
.dark .project-container .block2 .items>* .name{
    color: #d0a2f9;
}