InigoValentin/public/css/projects.css

/* Projects page */
section{
    width: 90%;
    margin: auto;
}

section div#projects{
    margin: 0;
    padding: 0;
    text-align: center;
}

section article.project{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 40%;
    margin: 2em 3%;
    padding: 1em;
    text-align: left;
    border-left: 0.1em solid #aacaaa;
    border-right: 0.1em solid #aacaaa;
    background: linear-gradient(to bottom, #e5f0e500 0%, #e5f0e5ff 20%, #e5f0e5ff 80%, #e5f0e500 100%);
}
@media screen and (max-width : 800px){
    section article.project{
        width: 96%;
        margin: 0.3em auto;
        padding: 0.3em;
    }
}

section article.project table{
    width: 100%;
}
section article.project table td.logo{
    text-align: center;
    vertical-align: top;
    width: 9em;
}
section article.project table td.logo img.project_image{
    padding: 0.5em;
    max-width: 9em;
    max-height: 9em;
    background-color: #cccccc;
    border: 0.1em solid #60ae29;
    box-shadow: inset 0 0 0.5em #00220077;
    border-radius: 1em;
}
@media screen and (max-width : 800px){
    section article.project table td.logo{
        width: 17vw;
    }
    section article.project table td.logo img.project_image{
        padding: 0.3em;
        width: 15vw;
        height: 15vw;
        border-radius: 0.5em;
    }
}
section article.project table td.project_details{
    padding-left: 1.5em;
    vertical-align: top;
}
@media screen and (max-width : 800px){
    section article.project table td.project_details{
        padding-left: 0.5em;
    }
    section article.project table td.project_details h4{
        margin-bottom: 0.2em;
    }
}

section article.project table span.project_tagline{
    font-size: 80%;
    font-style: italic;
}