.main-block{
    display: block;
    text-align: center;
    margin-inline: 25px;
    color: var(--page-text-color);
}

.non-projects-text{
    padding-top: 25px;
    padding-bottom: 50px;
    border-bottom: 2px solid black;
}

@keyframes zoomin {
    from {
        transform: scale(1);
        /* aspect-ratio: 1/1; */
    }
    to {
        transform: scale(1.5);
        /* aspect-ratio: 1/2; */
    }
}

@keyframes zoomout {
    from {
        transform: scale(1.5);
        /* aspect-ratio: 1/2; */
    }
    to {
        transform: scale(1);
        /* aspect-ratio: 1/1; */
    }
}

.zoomed {
    animation: zoomin 0.3s ease forwards;
    z-index: 1;
    
}
.zoomed-out {
    animation: zoomout 0.3s ease forwards;
    z-index: 0;
}

.overlay {
    position: fixed;
    position-area: y-start;
    z-index: 101;
    top: 35%;
}
.project-container{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.project{
    border-bottom: 2px solid black;
}
.placeholder{
    height:267px;
    width:206px;
}
.img{
    width:200px;
    max-height:400px;
    aspect-ratio: 1/1;
    gap: 25px;
    border: 3px solid black;
}
.projects-text {
    padding-bottom: 50px;
}


/* Tablet */
@media screen and (min-width:768px) {
    .project-container{
        display:flex;
        flex-direction: row;
        justify-content: center;
        gap: 50px;
        padding-bottom:70px;
    }
}