.block_moocs .grids {
    container-type: inline-size;
}

.block_moocs .grids .grid {
    flex-wrap: wrap;
    gap: var(--grid-space);
    padding-inline: 0;
}

.block_moocs .grids .grid.col4 .item {
    flex: 0 0 calc(25% - var(--grid-space) * 0.75);
}

.block_moocs .grids .grid .item {
    padding: 0 !important;
    position: relative !important;
    /* overflow: hidden; */
}

.block_moocs .area {
    padding: var(--grid-space);
    border-radius: var(--radiusValue);
    background-color: var(--lightergrey);
}

.block_moocs .grids .grid.details .item > picture > img {
    width: 100%;
    aspect-ratio: 3 / 2.3;
    /*border-radius: var(--radiusValue) var(--radiusValue) 0 0;*/
    object-fit: cover;
}

.block_moocs .grids .grid .item picture img {
    border-radius: var(--radiusValue);
    width: 100%;
}

/*.block_moocs .grids .grid .item .name {*/
/*    margin-block: 0.5rem;*/
/*    font-size: 1.1rem;*/
/*}*/

.block_moocs .my-space {
    margin-block: var(--grid-space) !important;
}

.block_moocs #groups {
    width: 100%;
    padding: 1rem;
    border-radius: var(--radiusValue);
    background-color: var(--lightergrey);
    border: 1px solid var(--lightgrey);
    box-shadow: 0.5rem 0.5rem 1rem #0004;
}


/* Grids */
.grids .grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-space);
    padding-inline: 0;
}

.grids .grid .item {
    padding: 0 !important;
    position: relative !important; /*overflow:hidden*/
}

.grids .grid .item picture img {
    border-radius: var(--radiusValue);
    width: 100%
}

.grids .grid .item .name {
    margin-block: 0.5rem;
    text-align: left;
    font-size: 1rem;
    font-weight: 500
}

.grids .grid.col5 .item {
    flex: 0 0 calc(20% - var(--grid-space) * 0.80);
    display: flex;
    align-items: center;
}

.grids .grid.col5 .item picture {
    display: block;
    margin: var(--grid-space);
    flex: 0 0 25%;
}

.grids .grid.col4 .item {
    flex: 0 0 calc(25% - var(--grid-space) * 0.75);
    display: flex;
    align-items: center;
}

.grids .grid.col4 .item picture {
    display: block;
    margin: var(--grid-space);
    flex: 0 0 25%;
}

.grids .grid.col3 .item {
    flex: 0 0 calc(33.3333333% - var(--grid-space) * 0.666666);
    display: flex;
    align-items: center;
}

.grids .grid.col3 .item picture {
    display: block;
    margin: var(--grid-space);
    flex: 0 0 25%;
}

.grids .grid.col2 .item {
    flex: 0 0 calc(50% - var(--grid-space) * 0.5);
    display: flex;
    align-items: center;
}

.grids .grid.col2 .item picture {
    display: block;
    margin: var(--grid-space);
    flex: 0 0 25%;
}

.grids .grid.col1 .item {
    flex: 0 0 calc(100% - var(--grid-space));
    display: flex;
    align-items: center;
}

.grids .grid.col1 .item picture {
    display: block;
    margin: var(--grid-space);
    flex: 0 0 25%;
}

.grids .grid .cell {
    padding: var(--grid-space) !important;
    display: flex;
    gap: var(--grid-space)
}

.grids .grid .item.cell h4 {
    margin: 0 !important;
    text-align: left;
}

.grids .grid .item.cell h6 {
    text-align: left;
    font-weight: 400
}

.grids .grid .cell .left.flank.icon {
    all: unset;
    flex: 0 0 20%;
}

.grids .grid .cell .right.flank {
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.grids .grid .cell .right.flank .progress-field {
    margin-top: auto
}

.grids {
    container-type: inline-size
}

@container (max-width:800px) {
    .grids .grid.col5 .item {
        flex: 0 0 calc(25% - var(--grid-space) * 0.75);
    }

    .grids .grid.col4 .item {
        flex: 0 0 calc(33.3333333% - var(--grid-space) * 0.666666);
    }

    .grids .grid.col3 .item {
        flex: 0 0 calc(50% - var(--grid-space) * 0.5);
    }
}

@container (max-width:400px) {
    .grids .grid.col5 .item {
        flex: 0 0 calc(50% - var(--grid-space) * 0.5);
    }

    .grids .grid.col4 .item {
        flex: 0 0 calc(50% - var(--grid-space) * 0.5);
    }

    .grids .grid.col3 .item {
        flex: 0 0 100%
    }

    .grids .grid.col2 .item {
        flex: 0 0 100%
    }
}

.mr-space {
    margin-right: var(--grid-space) !important
}

img.notFound {
    background-color: var(--primary) !important;
    padding: 20% !important;
    object-fit: contain !important;
}

.grids .grid.col3 .item picture {
    position: relative;
}

.grids .grid.col3 .item picture.mark::after {
    content: '\2713';
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 0;
    left: 100%;
    translate: -90% -10%;
    display: grid;
    border-radius: 50%;
    border: 2px dotted var(--lightergrey);
    place-content: center;
    background-color: #36C980;
    box-shadow: -0.1rem 0.1rem 0.5rem -0.18rem #0009;
    color: #FFF;
    font-weight: 600;
}

#moocs mark, .mark {
    padding: 0 !important;
}

#moocs .item picture.uploadedtorepo::after {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 0;
    left: 100%;
    translate: -90% -10%;
    display: grid;
    border-radius: 50%;
    border: 2px dotted var(--lightergrey);
    place-content: center;
    background-color: var(--primary);
    box-shadow: -0.1rem 0.1rem 0.5rem -0.18rem #0009;
    background-image: var(--repo-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70% 70%;
}


/* Progress Tiny Pie */
@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

#moocs .item .name {
    flex: 1;
}

#moocs .item .name .highlight {
    background-color: var(--primary);
    color: #fff;
}

#moocs .item picture {
    pointer-events: none;
}

#moocs .item {
    overflow: hidden;
}

#moocs .item .link {
    transition: background-color 0.3s;
}

/*#moocs .item .link:hover {*/
/*    background-color: var(--primary);*/
/*    color: #fff;*/
/*}*/

#progress {
    user-select: none;
    pointer-events: none;
    display: inline-block;
    position: relative;
    top: 0.5rem;
    right: 0.5rem;
    height: 100%;
}

.tinypie {
    --border: 6px;
    --color: var(--primary);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;
    padding: calc(var(--border) + 2px);
    width: 7ch;
    font-size: 0.8rem;
}

.tinypie::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--border);
    box-sizing: border-box;
    border-radius: 50%;
    background: conic-gradient(#0000 0, #0000 calc(var(--p) * 1%), var(--lightgrey) calc(var(--p) * 1%));
    mask: linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#0000 0, #000 calc(var(--p) * 1%));
}

.tinypie::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary);
    padding: var(--border);
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--color);
    mask: linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 calc(var(--p) * 1%), #0000 0);
}

.tinypie.animate {
    animation: p 1s .5s both;
}

@keyframes p {
    from {
        --p: 0;
    }
}

/******************************/