@import url("https://fonts.googleapis.com/css?family=Raleway:300,400");
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400");
/* common setup */

* {
    box-sizing: border-box;
    font-family: Raleway;
    color: #777;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: rgb(255, 255, 255);
}
h2 {
    display: block;
}

img {
    max-width: 100%;
    height: auto;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    grid-gap: 1em 1em;
    max-width: 900px;
    margin: 0.5rem auto;
    padding: 0.5em;
    /* background-color: rgba(255, 228, 196, 0.817); */
}

.project-card-grid {
    background-color: white;
    display: grid;
    grid-template-columns: 0.8fr 0.2fr;
    grid-gap: 0.5em 0.2em;
    max-width: 400px;
    min-height: 200px;
    box-shadow: 1px 2px 6px 2px rgba(96, 96, 96, 0.085);
    /* background-color: rgb(255, 215, 196); */

}

a {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 0.8fr 0.2fr;
}

.project-name-box {
    grid-column: span 1;
    padding: 2em 0.5em 0.5em 2em;
    font-size: 1.2em;
    font-weight: 900;
    /* background-color: rgba(244, 156, 50, 0.782); */
}

.fas {
    grid-column: span 1;
    padding: 2em 0.5em 0.5em 0.2em;
    font-size: 1.2em;
    font-weight: 900;
}

.project-image-box {
    grid-column: span 2;
    padding: 0.5em;
    /* background-color: rgba(244, 211, 24, 0.782); */

}

.project-tech-details-box {
    grid-column: span 2;
    padding: 2em 0.5em 0.5em 2em;
    /* background-color: rgba(207, 244, 24, 0.782); */
}

.project-description-box {
    grid-column: span 2;
    padding: 1em 1em 1em 2em;
    font-size: 1em;
    justify-self: end;
    align-self: end;
}

.project-link-box {
    padding: 0 2em 1.5em 0;
    justify-self: end;
    align-self: end;
}

@media(max-width: 768px) {
    .project-card-grid {
        padding-bottom: 1.5em;
        border-bottom: 1px solid rgb(227, 227, 227);
    }

}