.card {
    box-shadow: 0 18px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .2);
    transition: .3s;
    width: 100%;
    border-radius: 15px;
    background-color: #fff;
    width: 100%;
	margin: 10px auto;
}

.card:hover {
    box-shadow: 0 15px 35px rgba(249, 158, 26, .2), 0 5px 15px rgba(229, 138, 6, .4);
    cursor: pointer;
}

.card-image {
    object-fit: cover;
    width: 100%;
    height: 240px;
    border-radius: 5px 5px 10px 10px;
}

.card-container {
    margin-top: 1em;
    line-height: 1;
    padding: 2px 1em;
}

.project-title,
.project-note {
    display: inline;
    color: #5294E2;
}

@media (min-width: 450px){
	.section-grid{
	    display: grid;
	    grid-gap: 1em;
    	grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1280px){
	.section-grid{
    	grid-template-columns: repeat(3, 1fr);
	}
}