body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.contents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    
    /* 横幅を基準にする（画面の80%など） */
    width: 80vw;
    /* 高さは横幅に合わせて正方形になるようにする（もしくは最大サイズを指定） */
    max-width: 400px; 
    aspect-ratio: 1 / 1; /* 縦横比を1:1に固定して正方形を維持 */
    
    /* モバイルでの重なりを防ぐために少し隙間を開ける */
    gap: 10px; 
}

.items {
    overflow: hidden;
    /* 枠線などが必要な場合はここに追加 */
}

.items img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* QRコードが切れないように cover から contain に変更推奨 */
    display: block;
}