* {
    box-sizing: border-box;
}

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


/* MOBILE-FIRST APPROACH: Default styles for small screens */
.cards {
    color: beige;
    display:50px ;
    flex-direction:20px ;
    gap:30px;
    max-width:500px ;
    margin:50px;
    padding: 10px;
}

.card {
    background:rgb(255, 167, 196);
    border-radius: 15px ;
    padding: 10px ;
    box-shadow: 10px ;
    text-align: center ;
}

.card img {
    width: 700px ;
    max-width: ;
    border-radius:5-px ;
    margin-bottom: ;
}
.card h2 {
    color:rgb(255, 255, 255);
    margin:10px;
    font-size:25px ;
}

.lifespan {
    color:rgb(193, 5, 124) ;
    font-size:;
    margin-bottom: ;
    font-weight: ;
}

blockquote {
    background-color:rgb(255, 255, 255) ;
    margin: ;
    padding: ;
    border-left: ;
    font-style: ;
    color: ;
    border-radius: ;
}

blockquote p {
    margin:;
    font-size: ;
}

cite {

}

cite a {
    color:rgb(146, 45, 91);
    text-decoration: ;
    font-weight: ;
}

cite a:hover {
    color: purple;
    text-decoration:;
}

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

/* BREAKPOINT: Desktop/laptop 1024px and up */
@media (min-width: 1024px) {
    .cards-container {
        justify-content: ;
        gap: ;
    }
    
    .card {
        flex: ;
        max-width: ;
    }
    
    .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:;
        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: ;
    }
}