/* .card article img, 012
.card footer, 011
.card header, 011
.card, 010 */

/* General styles */

body {
    margin: 0;
}

html {
    font-family: 'Helvetica neue', Arial, 'sans serif';
    font-size: 10px;
    background-color: #ccc;
}

h2, p {
    margin: 0;
}

h2 {
    font-size: 2em;
    line-height: 2.5em;
}

/* Card Container */

.card {
    width: 500px;
    height: 500px;
    margin: 5em auto;
    background-color: lightskyblue;
    border: solid darkslategrey;
    border-radius: 1em;
}

/* Header, footer */

.card header, .card footer {
    height: 5em;
    padding: 1em;
    border-radius: 1em;
}

.card header {
    background: linear-gradient(180deg, rgba(2,0,36,0.5) 0%, rgba(9,11,123,.5) 5%,
    rgba(9,9,121,0.5) 18%, rgba(0,212,255,1) 100%);

}

.card footer {
    background: linear-gradient(180deg, rgba(2,0,36,0.5) 0%, rgba(9,11,123,.5) 5%,
    rgba(9,9,121,0.5) 18%, rgba(0,212,255,1) 100%);
}

.card footer p {
    font-size: 1.5em;
    line-height: 3.5em;
}

/* Main business card content */

.card article img {
    max-height: 100%;
    float: right;
}

article {
    height: 12em;
    background-color: rgba(0,0,0,0.3);
    padding: 12em;
}