* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:rgb(111, 108, 108);
    line-height: 1.6;
}


/* MOBILE-FIRST APPROACH: Default styles for small screens */
.cards {
    display:flex ;
    flex-direction:column ;
    gap:1em;
    max-width:100% ;
    margin: ;
    padding:1em ;
    align-items: stretch;
}

.card {
    background:whitesmoke ;
    border-radius: 0.5em; ;
    padding:1em ;
    overflow:hidden;
    box-shadow:2px 2px 5px #c6c6c6 ;
    text-align:left ;
   
}

.card img {
    width:100% ;
    border-radius:.5em ;
    margin-bottom:.5em ;
}
.card h2 {
    color:black ;
    margin-inline: 1em;
    font-size:24px ;
    margin-top:.5em ;
    margin-bottom:.3em ;
    margin-left:1.8em ;
    margin-right:1em ;
}

.lifespan {
    font-size:17px;
    margin-bottom:1em ;
    margin-left: 2.5em;
    font-weight:normal ;
    font-style: italic;
    
}

blockquote {
   
}

blockquote p {

}

cite {
    margin-inline:2.6em;
    margin-bottom: 1em;

}

cite a {
    color:blue;
    text-decoration:none ;
    font-weight:normal ;
}

cite a:hover {
    color:rgb(47, 210, 255) ;
    text-decoration:wavy;
}

/* BREAKPOINT: Tablet sizes 768px and up */
@media (min-width: 768px) {
    .cards{
        flex-direction:row ;
        flex-flow: row wrap;
        flex-wrap: ;
        justify-content:left;
        align-items:;
    }
    
    .card {
        flex:1 1 400px;
        max-width:100% ;
        min-width: ;
    }
    
}

/* BREAKPOINT: Desktop/laptop 1024px and up */
@media (min-width: 1024px) {
    .cards-container {
        justify-content:left ;
        gap: ;
    }
    
    .card {
        flex:1 1 400px ;
        max-width:300px ;
    }
    
    .card h2 {
        font-size: ;
    }
    
    blockquote p {
        font-size: ;
    }
}

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

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