/* リスト全体の枠組み（横並びにする） */
.sns-item__list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    /* 画像と画像の間のすき間（上下左右） */
    list-style: none;
    /* 箇条書きの黒丸を消す */
    padding: 0;
    margin: 0;
}

/* 各アイテム（PCでは4件横並び） */
.sns-item__list li {
    width: calc((100% - 60px) / 4);
    /* 4本並びの計算（隙間3つ分＝60pxを引いて4等分） */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* 画像がはみ出さないように調整 */
.sns-item__list li img {
    width: 100%;
    height: auto;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    aspect-ratio: 1/1;
    /* 画像を1:1の正方形にする */
}

/* スマホ画面（横幅767px以下）での見え方 */
@media screen and (max-width: 767px) {
    .sns-item__list ul {
        gap: 10px;
        /* スマホでは隙間を少し狭く */
    }

    .sns-item__list li {
        width: calc((100% - 10px) / 2);
        /* スマホでは2列にする */
    }
}