.projects {
    padding: 20px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
} 

.project-item {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Small Phones */
@media  (max-width: 320px) {
    .summary-image {
        width: 95px;
        height: 95px;

    }

    .project-item {
        height: 60px;
        line-height: 60px;
    }

}

/* Phones */
@media  (max-width: 480px) {
    .summary-image {
        width: 100px;
        height: 100px;

    }

    .project-item {
        height: 80px;
        line-height: 80px;
    }

}

/* Tablets and smaller */
@media (max-width: 768px) {
    .projects {
        flex-direction: column;
    }

    .project-grid {
        grid-template-columns: 1fr;
    }

}