#feed {

display: flex;

flex-wrap: wrap;

gap: 2%;

justify-content: start;

}

.list-box {

width: 23.5%;

display: flex;

flex-direction: column;

align-items: left;

text-align: left;

padding: 5px;

}

.list-img {

width: 100%; /* 親要素の幅いっぱい */

aspect-ratio: 16 / 10; /* 縦横比を16:10に統一（お好みで調整） */

overflow: hidden; /* はみ出した部分を非表示 */

border-radius: 2px; /* 角を丸く */

border: 1px solid #ddd;

}

.list-img img {

width: 100%; /* 横幅100% */

height: 100%; /* 高さも親要素に合わせる */

object-fit: cover; /* 画像をちょうどよくトリミングして表示 */

}

.list-text {

margin: 10px;

text-align: left;

}

.list-date {

display: block;

color: #666;

font-size: 14px;

margin-bottom: 5px;

}

.list-text h3 {

font-size: 16px;

color: #333;

margin: 0;

font-weight: 500;

line-height: 1.6;

}

.list-text a {

text-decoration: none;

color: #0073e6;

font-weight: bold;

}

/* スマホ対応（横幅が640px以下の時は縦並び） */

@media (max-width: 640px) {

.list-box {

width: 48%;

display: flex;

flex-direction: column;

align-items: left;

text-align: left;

padding: 5px;

}

}