Image Gallery Revised From W3Schools

<!-- Created by TheiPhoneFan on 2024-03-26 -->
<!-- Previews 6.0.3, 2022-2024 -->
<!-- Original: https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery -->
<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,900" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="./theme/style.css" />
    <style>
        div.gallery {
            border: 1px solid #ccc;
            border-radius: 16px;
        }

        div.gallery:hover {
            border: 1px solid #777;
        }

        div.gallery img {
            width: 100%;
            height: auto;
            border-radius: 16px 16px 0px 0px;
        }

        div.desc {
            padding: 15px;
            text-align: center;
           font-family: 'Roboto', sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        .responsive {
            padding: 0 6px;
            float: left;
            width: 24.99999%;
        }

        @media only screen and (max-width: 700px) {
            .responsive {
                width: 49.99999%;
                margin: 6px 0;
            }
        }

        @media only screen and (max-width: 500px) {
            .responsive {
                width: 100%;
            }
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="https://www.w3schools.com/css/img_5terre.jpg">
                <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
            </a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>


    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="https://www.w3schools.com/css/img_forest.jpg">
                <img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400">
            </a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="https://www.w3schools.com/css/img_lights.jpg">
                <img src="https://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400">
            </a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="https://www.w3schools.com/css/img_mountains.jpg">
                <img src="https://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400">
            </a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>
</body>
</html>