yellow brown vintage html image gallery layout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>good luck gallery</title>
<style>
    body {
        background: #fdfd96;
        font-family: "MS Gothic", sans-serif;
        color: #654321;
        margin: 0;
        padding: 0;
    }

    /* border */
    .lace-border {
        border: 50px solid transparent;
        padding: 50px;
        border-image: url('https://i.pinimg.com/736x/81/d2/24/81d224564ba73b3f328b4d7c1ea145e6.jpg') 50 round;
        min-height: 100vh;
        box-sizing: border-box;

        /* Center everything */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    h1 {
        text-align: center;
        font-size: 40px;
        text-shadow: 0 0 10px white;
        margin-top: 10px;
        font-family: "MS Gothic", sans-serif;
    }

    /* Centered gallery container */
    .gallery-container {
        max-width: 900px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
        width: 100%;
        padding: 20px;
    }

    .gallery img {
        width: 100%;
        border-radius: 15px;
        border: 3px solid #654321;
        cursor: pointer;
        transition: transform 0.2s;
        box-shadow: 0 0 10px #654321;
    }

    .gallery img:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px #654321;
    }

    /* Modal */
    #modal {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(255, 200, 230, 0.8);
        backdrop-filter: blur(4px);
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    #modal img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 20px;
        border: 5px solid #654321;
        box-shadow: 0 0 20px white;
    }
</style>
</head>
<body>

<div class="lace-border">

    <h1>♡ My Gallery ♡</h1>

    <div class="gallery-container">
        <div class="gallery">
            <!-- Add endless images here click imgs to make them bigger -->
            <img src="https://i.pinimg.com/736x/57/48/d0/5748d00fd44fd3f289d1d86cc87e046f.jpg" onclick="openModal(this.src)">
            <img src="https://i.pinimg.com/736x/c5/c6/1f/c5c61f6eff10f117cae387cb449f07fd.jpg" onclick="openModal(this.src)">
            <img src="https://i.pinimg.com/736x/c1/86/88/c186883861ce72a5c2f43473e9946603.jpg" onclick="openModal(this.src)">
            <img src="https://i.pinimg.com/736x/de/dc/30/dedc30d47971132084cb2f01931ee86c.jpg" onclick="openModal(this.src)">
            <img src="https://i.pinimg.com/originals/ca/13/f5/ca13f5f5baf5d4451763721d92fb4650.gif" onclick="openModal(this.src)">
        </div>
    </div>

    <div class="gallery-container">
        <div class="gallery">
            <!-- Add endless images here -->
            <img src="https://i.pinimg.com/736x/b3/82/f1/b382f1d85e5ba337b344812ed4cace3b.jpg" onclick="openModal(this.src)">
            <img src="https://i.pinimg.com/736x/fd/42/03/fd420377601f2ba45af318782ee5d3a4.jpg" onclick="openModal(this.src)">
            <img src="https://i.pinimg.com/736x/88/a0/2b/88a02b6cfeed6c970a4bb11db0bd4ed4.jpg" onclick="openModal(this.src)">
            <img src="https://i.pinimg.com/736x/57/cd/1d/57cd1dff2e370da6e58ef8c5fb1afcdf.jpg" onclick="openModal(this.src)">
            <img src="https://i.pinimg.com/736x/7c/23/83/7c2383e994de259d01bc3b9e4f7e5e4a.jpg" onclick="openModal(this.src)">
        </div>
    </div>

</div>

<!-- Modal -->
<div id="modal" onclick="closeModal()">
    <img id="modal-img">
</div>

<script>
function openModal(src) {
    document.getElementById("modal-img").src = src;
    document.getElementById("modal").style.display = "flex";
}
function closeModal() {
    document.getElementById("modal").style.display = "none";
}
</script>

</body>
</html>