モーダル機能 複数 レスポンシブル

<div class="main-content">
    <img class="modal-open img-hover" 
           src="#" alt="#" />

    <div class="modal-container">
        <div class="modal-body">
            <div class="modal-close">
                ×
            </div>

            <div class="modal-content">
                <div class="modal-sp">
                    <div>
                        <img src="#" alt="#" 
                           class="modal-image" />

                            <a href="#" 
                             target="_blank"
                                rel="noopener noreferrer">
                            </a>
                        </p>
                    </div>

                    <div class="modal-content-img">
                        <div>
                            <a href="#">
                                <img src="#" alt="#" />
                                <div class="box" style="text-align: center;">
                                    <p style="font-weight: normal;">詳細</p>
                                </div>
                            </a>
                        </div>

                        <div class="img-hover">
                            <a href="#">
                                <img src="#" alt="#" />
                                <div class="box" style="text-align: center;">
                                    <p style="font-weight: normal;">もっとみる</p>
                                </div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="main-content">
    <img class="modal-open2 img-hover" 
           src="#" alt="#" />

    <div class="modal-container2">
        <div class="modal-body2">
            <div class="modal-close2">
                ×
            </div>

            <div class="modal-content">
                <div class="modal-sp">
                    <div>
                        <img src="#" alt="#" 
                           class="modal-image" />

                            <a href="#" 
                             target="_blank"
                                rel="noopener noreferrer">
                            </a>
                        </p>
                    </div>

                    <div class="modal-content-img">
                        <div>
                            <a href="#">
                                <img src="#" alt="#" />
                                <div class="box" style="text-align: center;">
                                    <p style="font-weight: normal;">詳細</p>
                                </div>
                            </a>
                        </div>

                        <div class="img-hover">
                            <a href="#">
                                <img src="#" alt="#" />
                                <div class="box" style="text-align: center;">
                                    <p style="font-weight: normal;">もっとみる</p>
                                </div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="main-content">
    <img class="modal-open3 img-hover" 
           src="#" alt="#" />

    <div class="modal-container3">
        <div class="modal-body3">
            <div class="modal-close3">
                ×
            </div>

            <div class="modal-content">
                <div class="modal-sp">
                    <div>
                        <img src="#" alt="#" 
                           class="modal-image" />

                            <a href="#" 
                             target="_blank"
                                rel="noopener noreferrer">
                            </a>
                        </p>
                    </div>

                    <div class="modal-content-img">
                        <div>
                            <a href="#">
                                <img src="#" alt="#" />
                                <div class="box" style="text-align: center;">
                                    <p style="font-weight: normal;">詳細</p>
                                </div>
                            </a>
                        </div>

                        <div class="img-hover">
                            <a href="#">
                                <img src="#" alt="#" />
                                <div class="box" style="text-align: center;">
                                    <p style="font-weight: normal;">もっとみる</p>
                                </div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.main-container {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.main-content {
    width: calc(100% /3);
}

.img-hover:hover {
    opacity: 0.6;
    filter: brightness(110%);
    -webkit-transition: all .3s;
    transition: all .3s;
}

/*モーダルを開くボタン*/
.modal-open,
.modal-open2,
.modal-open3 {
    cursor: pointer;
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container,
.modal-container2,
.modal-container3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    z-index: 101;
}

/*モーダル本体の擬似要素の指定*/
.modal-container:before,
.modal-container2:before,
.modal-container3:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active,
.modal-container2.active,
.modal-container3.active {
    opacity: 1;
    visibility: visible;
}

/*モーダル枠の指定*/
.modal-body,
.modal-body2,
.modal-body3 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    top: 5%;
}

/*モーダルを閉じるボタンの指定*/
.modal-close,
.modal-close2,
.modal-close3 {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 5px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #929191;
    cursor: pointer;
}

/*モーダル内のコンテンツの指定*/
.modal-content {
    background: #fff;
    text-align: left;
    padding: 40px;
}

.modal-content-img {
    display: inline-grid;
    row-gap: 20px;
    width: 30%;
}

.modal-sp {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.modal-link-image {
    width: 30%;
    margin: 30px 0px 0px 0px;
}

.fhoto-text {
    magin-top: 10px;
    font-weight: bold;
}

.box {
    text-align: center;
    margin-top: 10%;
    border: solid 1px #000000;
}

.box p {
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 767px),
print {

    .main-container {
        gap: 10px;
        margin-bottom: 10px;
    }

    .modal-body,
    .modal-body2,
    .modal-body3 {
        width: 90%;
    }


    .modal-content-text {
        margin: 0px;
    }

    .modal-content {
        margin: 0px;
        padding: 25px
    }

    .modal-close,
    .modal-close2,
    .modal-close3 {
        font-size: 30px;
        width: 20px;
        height: 30px;
    }

    .modal-image {
        width: 100%;
    }

    .modal-link-image {
        width: 50%;
        margin: 20px 0px 15px 0px;
    }

    .itemDetail-content-text p {
        font-weight: bold;
    }
}

@media screen and (max-width: 480px) {
    .box p {
        transform: scale(0.6);
    }
}

$(function () {
    // モーダルを定義した配列
    var modals = [
        { open: '.modal-open', close: '.modal-close', container: '.modal-container' },
        { open: '.modal-open2', close: '.modal-close2', container: '.modal-container2' },
        { open: '.modal-open3', close: '.modal-close3', container: '.modal-container3' }
    ];

    // 各モーダルに対して繰り返す
    modals.forEach(function (modal) {
        var open = $(modal.open),
            close = $(modal.close),
            container = $(modal.container);

        // 開くボタンがクリックされたら、コンテナに「active」クラスを追加する
        open.on('click', function () {
            container.addClass('active');
            return false;
        });

        // 閉じるボタンがクリックされたら、コンテナから「active」クラスを削除する
        close.on('click', function () {
            container.removeClass('active');
        });

        // コンテナの外側をクリックしたら、「active」クラスを削除する
        $(document).on('click', function (e) {
            if (!$(e.target).closest(container).length) {
                container.removeClass('active');
            }
        });
    });
});