/* General styles - put these straight into your stylesheet */

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

/* Selectors to be matched up with rulesets */

/* .card article img */
/* .card footer */
/* .card header */
/* .card */

/* Rulesets to be matched up with selectors */

.card {
width: 35em;
height: 22em;
margin: 5em auto;
/* background-colour: red; */
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}

.card header {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
border-radius: 1.5em 1.5em 0 0;
height: 3em;
padding: 1em;
}

.card footer {
background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
border-radius: 0 0 1.5em 1.5em;
height: 3em;
padding: 1em;
}

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

.card h2 {
margin: 0;
font-size: 2em;
line-height: 1.5em; 
}

.card p {
margin: 0;
}

/* header h2 {
font-size: 2em;
line-height: 1.5em;
} */

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

.card article {
height: 12em;
background-color: rgba(0,0,0,0.2);

}

.card article p {
padding: 1em;
color: #ccc;
line-height: 1.4em;
}

.card2 {
    width: 35em;
    height: 22em;
    margin: 5em auto;
    /* background-colour: red; */
    background-color: rgba(124, 164, 158, 0.652);
    border: 0.2em solid black;
    border-radius: 1.5em;
    }
    
    .card2 header {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
    border-radius: 1.5em 1.5em 0 0;
    height: 3em;
    padding: 1em;
    }
    
    .card2 footer {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
    border-radius: 0 0 1.5em 1.5em;
    height: 3em;
    padding: 1em;
    }
    
    .card2 article img {
    max-height: 100%;
    float: right;
    }
    
    .card2 h2 {
    margin: 0;
    font-size: 2em;
    line-height: 1.5em; 
    }
    
    .card2 p {
    margin: 0;
    }
    
    /* header h2 {
    font-size: 2em;
    line-height: 1.5em;
    } */
    
    .card2 footer p {
    font-size: 1.5em;
    line-height: 1.5em;
    }
    
    .card2 article {
    height: 12em;
    background-color: rgba(0,0,0,0.2);
    
    }
    
    .card2 article p {
    padding: 1em;
    color: #ccc;
    line-height: 1.4em;
    }