.projects{
margin: 8ch 0;
}

.projects h1{
    text-align: center
}

.project-view{
    margin:4ch 0;
    display: flex;
    flex-direction: row;
    gap: 7ch;
    /* padding: 0 auto; */
    width:fit-content;
    /* ------------ */
    /* background-color: antiquewhite; */
    padding: 20px;
    height:30ch;
    border-radius: 10px;
    box-shadow: 0 5px 20px grey;
}

.project-details{
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 100%;
    position: relative;
}

.project-image{
    margin-top:2ch;
}

.project-image img{
    width: 400px;
    border-radius: 5px;
}

.project-details h3{
    margin-top:1.5ch;
}

.project-details div{
 justify-self: center;
 padding: 1ch 0;
 color:rgb(81, 82, 118)
}

.project-details a{
    background-color:rgb(33, 12, 104);
    color:antiquewhite;
    font-weight:600;
    padding: 1.5ch 3ch;
    /* align-self: flex-end; */
    /* justify-self:flex-end; */
    position: absolute;
    right: 0;
    bottom: 0;
}

@media screen and (min-width:900px) {
    .project-view{
        width:70%;
    }
}

@media screen and (max-width:1160px) {
    .project-view{
        gap: 1ch;
    }
}

@media screen and (max-width:900px) {
    .project-view{
        flex-direction: column;
    }

    .project-view{
        padding: 20px;
        height:50ch;
        border-radius: 10px
    }

}


@media screen and (max-width:500px) {
    .project-image img{
        width: 300px;
    }

    .project-details{
        width: 300px;
    }
}