* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #633434;
    line-height: 1.6;
}


/* MOBILE-FIRST APPROACH: Default styles for small screens */
.cards {
    display: flex ;
    flex-direction: column ;
    gap:5em;
     
}

.card {
    background: whitesmoke ;
    border-radius:1em;
    overflow: hidden;
    box-shadow: 5px 5px 10px cadetblue ;
}

.card img {
    width: 100%;
    display:block;
}
.card h2 {
    margin-inline: 1em;
}

.lifespan {
    color: blue ;
    margin-left:20px;
    font-style: italic;
}

blockquote {
    background-color: none ;
    margin-inline:2em ;
    padding:20px ;
}

blockquote p {
    margin:2%;

}

cite {
display:block;
margin-inline: 2%;
margin-bottom: 20px;
}

cite a {
    color:green;
    
}

cite a:hover {
    color: red;
}

/* BREAKPOINT: Tablet sizes 768px and up */
@media (min-width: 768px) {
    .cards{
        flex-flow: row wrap;
        gap: 5em;
    }
    
    .card {
        flex:1 1 400px;
        max-width: 400px;
    }
    
}

/* BREAKPOINT: Desktop/laptop 1024px and up */
@media (min-width: 1024px) {
    .cards-container {
        gap: 1em;
    }
}

/* BREAKPOINT: Large Desktop 1440px and up */
@media (min-width: 1440px) {
    .cards-container {
        gap:1em ;
    }
    
    .card {
        flex:row;
        max-width: 600px;;
        padding:1em ;
    }
}

/* BREAKPOINT: Small screen 480px and below */
@media (max-width: 480px) {
    body {
        padding:1px ;
    }
    
    .cards {
        padding:1em;
        gap:1em;
    }
    
    .card {
        padding: 1em;
    }
    
    .card h2 {
        font-size:12 ;
    }
    
    blockquote {
        padding: 1em;
        margin:1em ;
    }
    
    blockquote p {
        font-size:1em ;
    }
}