.project-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.project-page h1 {
    text-align: center;
    margin-bottom: 2rem;
}

.project-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.project-image {
    margin-left:auto;
    margin-right:auto;
    display:block;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform .5s;
}

.project-image:hover{
    transform: scale(2.5);
}

.project-description p {
    margin-bottom: 1rem;
}


@media (min-width: 768px) {
    .project-content {
        flex-direction: row;
        align-items: flex-start;
    }

    .project-image {
        flex: 1;
        max-width: 50%;
    }
    


    .project-description {
        flex: 1;
    }
}