怎么讓兩張圖片并列顯示？

最終效果為：

                <div class="bridge-scenes-warp">
                    <div class="scenes-item">
                        <img src="img/bridge02.png" alt="" class="scenes-pic" />
                        <div class="scenes-info r">
                            <h2 class="scenes-title black">Unlock your Ultraloq anytime, from anywhere</h2>
                            <p class="scenes-des black">Let friends, guests and service people into your home remotely</p>
                        </div>
                    </div>
                    <div class="scenes-item">
                        <img src="img/bridge03.png" alt="" class="scenes-pic" />
                        <div class="scenes-info r">
                            <h2 class="scenes-title white">Share Ekey Remotely</h2>
                            <p class="scenes-des white">Grant access to guests and visitors via an eKey for specific dates or periods of time with no monthly fees!</p>
                        </div>
                    </div>
                    <div class="scenes-item">
                        <img src="img/bridge04.png" alt="" class="scenes-pic" />
                        <div class="scenes-info l">
                            <h2 class="scenes-title white">Smart Alerts and Notifications</h2>
                            <p class="scenes-des white">Get instant alerts every time someone unlocks your door </p>
                        </div>
                    </div>
                    <div class="scenes-item">
                        <img src="img/bridge05.png" alt="" class="scenes-pic" />
                        <div class="scenes-info l">
                            <h2 class="scenes-title black">View logs on the Go</h2>
                            <p class="scenes-des black">Always know who’s entered and exactly when and how they did.</p>
                        </div>
                    </div>
                    <div class="scenes-item">
                        <img src="img/bridge10.png" alt="" class="scenes-pic" />
                        <div class="scenes-info l">
                            <h2 class="scenes-title black">Work with Alexa </h2>
                            <p class="scenes-des black">Ask Alexa to lock, unlock your door and check door status.</p>
                        </div>
                    </div>
                    <div class="scenes-item">
                        <img src="img/bridge06.png" alt="" class="scenes-pic" />
                        <div class="scenes-info l">
                            <h2 class="scenes-title white">Plug and Go</h2>
                            <p class="scenes-des white">Just plug into power and connect to your home Wi-Fi network</p>
                        </div>
                    </div>
                </div>

怎么顯示一行兩張圖片并列？
我這樣寫(xiě)，結(jié)果成屎了

    .bridge-scenes-warp{
        width: 100vw;
        height: 100%;
        margin: 0 auto;
        display: inline-block;
        .scenes-item{
            display: inline-block;
            position: relative;
            margin-right: 5px;
            height: 35vw;
            width: 50vw; 
            &:nth-child(2n){
                margin-right: 0;
            }
            .scenes-pic{
                vertical-align: -webkit-baseline-middle;
                text-align: center;
                width: 50vw;
                height: 100%;
                flex: 1 1 auto;
            }
            .scenes-info{
                width: 50%;
                .scenes-title{}
                .scenes-des{}
            }
            .r{
                text-align: left;
                position: absolute;
                bottom: 2vw;
                right: 2vw;
            }
            .l{
                text-align: left;
                position: absolute;
                bottom: 2vw;
                left: 2vw;
            }
            .black{
                color: $color-black;
            }
            .white{
                color: $color-f1;
            }
        }
    }
    

要做成這樣的布局：一行兩張圖片，自適應(yīng)顯示，這里有三行，共六張圖片，要怎么寫(xiě)呢？
如果要用下面的方法，是可以實(shí)現(xiàn)，但是做自適應(yīng)就很難做了。

        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 10px 10px;