<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/bootstrap.css">
    <title>Home</title>
    <style>
        @media screen and (min-width: 992px) {
            ul{
                height: 100%;
            }
        }
    </style>
</head>
<body>
    <h1>Birds</h1>
    
    <main class="w-100 justify-content-center d-flex">
        <section class="row row-cols-1 row-cols-lg-3 container-lg">
            <article class="col card">
                <div class="card-body row row-cols-1 row-cols-sm-2 row-cols-lg-1 overflow-hidden p-lg-0 py-lg-3">
                    <h2 class="card-title mx-2 text-sm-center col col-sm-12 mx-sm-0 ms-sm-5 ms-lg-2 text-lg-start">Penguin</h2>
                    <div class="col">
                        <img class="w-100 h-100 object-fit-cover rounded-3" src="img/Penguin.jpg" alt="Penguin">
                    </div>
                    <ul class="list-group list-group-flush col px-lg-3 flex-lg-grow-1">
                        <li class="list-group-item">Common Name: Penguin</li>
                        <li class="list-group-item">Scientific Name: Spheniscidae</li>
                        <li class="list-group-item">Type: Birds</li>
                        <li class="list-group-item">Diet: Carnivore</li>
                        <li class="list-group-item">Group Name: Colony</li>
                        <li class="list-group-item">Average life span in The Wild: 15-20 years</li>
                        <li class="list-group-item">Size: 16-45 inches</li>
                        <li class="list-group-item">Weight: 2-88 pounds</li>
                    </ul>
                </div>
            </article>
            <article class="col card">
                <div class="card-body row row-cols-1 row-cols-sm-2 row-cols-lg-1 overflow-hidden p-lg-0 py-lg-3">
                    <h2 class="card-title mx-2 text-sm-center col col-sm-12 mx-sm-0 ms-sm-5 ms-lg-2 text-lg-start">Owl</h2>
                    <div class="col">
                        <img class="w-100 h-100 object-fit-cover rounded-3" src="img/Owl.jpg" alt="Burrowing Owl">
                    </div>     
                    <ul class="list-group list-group-flush col px-lg-3">
                        <li class="list-group-item">Common Name: Burrowing Owl</li>
                        <li class="list-group-item">Scientific Name: Athene cunicularia</li>
                        <li class="list-group-item">Type: Birds</li>
                        <li class="list-group-item">Diet: Omnivore</li>
                        <li class="list-group-item">Average life span in The Wild: 6 - 8 years</li>
                        <li class="list-group-item">Size: 7.4 inches to 11 inches</li>
                        <li class="list-group-item">Weight: 5.2 to 8.5 ounces</li>
                    </ul>
                </div>           
            </article>
            
            <article class="col card">
                <div class="card-body row row-cols-1 row-cols-sm-2 row-cols-lg-1 overflow-hidden p-lg-0 py-lg-3">
                    <h2 class="card-title mx-2 text-sm-center col col-sm-12 mx-sm-0 ms-sm-5 ms-lg-2 text-lg-start">Parrot</h2>
                    <div class="col">
                        <img class="w-100 h-100 object-fit-cover rounded-3" src="img/Parrot.jpg" alt="Parrot">
                    </div>
                    <ul class="list-group list-group-flush col px-lg-3">
                        <li class="list-group-item">Common Name: Parrot</li>
                        <li class="list-group-item">Scientific Name: Psittaciformes</li>
                        <li class="list-group-item">Type: Birds</li>
                        <li class="list-group-item">Diet: Omnivore</li>
                        <li class="list-group-item">Average life span in The Wild: Up to 80 years</li>
                        <li class="list-group-item">Size: 3.5 inches to 40 inches</li>
                        <li class="list-group-item">Weight: 2.25 ounces to 3.5 pounds</li>
                    </ul>
                </div>            
            </article>
            <article class="col card">
                <div class="card-body row row-cols-1 row-cols-sm-2 row-cols-lg-1 overflow-hidden p-lg-0 py-lg-3">
                    <h2 class="card-title mx-2 text-sm-center col col-sm-12 mx-sm-0 ms-sm-5 ms-lg-2 text-lg-start">Puffin</h2>
                    <div class="col">
                        <img class="w-100 h-100 object-fit-cover rounded-3" src="img/Puffin.jpg" alt="Puffin">
                    </div>
                    <ul class="list-group list-group-flush col px-lg-3">
                        <li class="list-group-item">Common Name: Puffin</li>
                        <li class="list-group-item">Scientific Name: Fratercula</li>
                        <li class="list-group-item">Type: Birds</li>
                        <li class="list-group-item">Diet: Pescivore</li>
                        <li class="list-group-item">Average life span in The Wild: Up to 80 years</li>
                        <li class="list-group-item">Size: 13 to 15 inches</li>
                        <li class="list-group-item">Weight: 13 ounces to 1.72 pounds</li>
                    </ul>
                </div>
            </article>
        </section>
    </main>
</body>