@import "style.css";

#projects-screen::before {
    content: "";
    width: 90vw;
    height: 5px;
    background-color: var(--color-2);
}

.projects-grid {
    width: calc(80vw +  40px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.card {
    width: auto;
    margin: 30px 20px 20px 20px;
    padding-bottom: 10px;
    border-bottom: var(--color-1) 2px solid;
    
}

.card:hover {
    border-bottom: var(--color-2) 2px solid;
}

.card img {
    object-fit: cover;
    width: 100%;
    height: 180px;
    border-radius: 15vw;
}

@media (max-width: 650px) {
    
    .projects-grid {
        display: flex;
        flex-direction: column;
    }

}