:root {
    --items-size: min(377px, 100%);
    --radius-project-content: 10px;
}

.section-view#table {
    width: 100%;
    grid-template-columns: repeat(3, var(--items-size));
    justify-items: center;
    justify-content: center;
    gap: var(--space-normal);
    max-width: 100vw;
}

.project {
    position: relative;
    width: var(--items-size);
    height: 480px;
}

.project::before {
    content: "";
    width:  0;
    height: 0;
    background-color: rgb(180, 180, 180);
    border-radius: 11px;
}

.project::before {
    position: absolute;
    top: -1.5px;
    left: calc(50% + 1.5px);
    transform: translateX(calc(-50% - 1.5px));
    z-index: -1;
    transition: width 313ms linear,
                height 417ms ease-out 233ms;
}

.project:hover::before {
    width: calc(100% + 3px);
    height: calc(100% + 3px);
}


.project::after {
    content: attr(data-index-items);
    padding: var(--space-smaller) var(--space-small);
    background-color: rgb(180, 180, 180);
    color: #000;
    border-radius: min(8px, 35%);  
}

.project::after {
    position: absolute;
    top: 0;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -22%) scale(.9);
    transition: opacity 353ms ease,
                transform 217ms linear;
}

.project:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.project img {
    width: 100%;
    max-height: 240px;
}


.project .content {
    height: 240px;
    background-color: rgb(32, 32, 34);
    border-bottom-left-radius:  var(--radius-project-content);
    border-bottom-right-radius: var(--radius-project-content);
    padding: var(--space-small);
    padding-top: var(--space-normal);
}

.project img {
    border-radius: var(--radius-project-content);
    border-bottom-left-radius:  0 !important;
    border-bottom-right-radius: 0 !important;
}

.project h1.text {
    color: rgb(175, 175, 180);
    border-bottom: 2px solid rgb(54, 54, 57);
    padding-bottom: 5px;
    margin-bottom: 5px;
} 


@media screen and ( width < 1210px ) {
    
    .section-view#table {
        grid-template-columns: repeat(2, var(--items-size));
    }

}

@media screen and ( width < 800px ) {
    
    .section-view#table {
        grid-template-columns: var(--items-size);
    }

}