.project-card { position: relative; display: inline-block; vertical-align: top; border-radius: 4px; width: 18em; height: 8em; padding: 0; margin: 0 1em 1em 0; border: 1px solid #002244; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .project-title { padding-bottom: .1em; margin: 0; text-overflow: ellipsis; } .card-content { display: block; overflow: hidden; margin: 0; padding: .6em; height: 4.3em; } .card-content p { height: 2.5em; overflow: hidden; line-height: 1.25em; } .project-organizer { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: .3em .6em; border-top: 1px solid #002244; font-size: .8em; } .card-content * { margin-top: 0; } .projects-divider { border: 0; margin-bottom: 2em; } .contentsplit { display: grid; grid-template-columns: 1.3fr 2.7fr; } .gridl { padding: 0 1em 0 1em; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2); } .gridr { border-left: 0; } .projectowner { padding: 0 .5em 0 .5em; overflow: hidden; border-left: 4px solid #35a; } .projectowner p { margin: 0; } .projectowner p { font-size: .8em; } .projectowner p:first-child { font-size: 1em; margin-bottom: .2em; } .owneruname, .owneremail { display: inline-block; color: #888; } .owneruname { float: left; } .owneremail { float: right; } @media screen and (max-width: 50rem) { .projects { display: inline-block; } }