【CSS】画像や動画のアスペクト比(縦横比)を固定してレスポンシブに対応する方法aspect-ratio編

<div class="item-img">
  <-- コンテンツをここに配置する -->
</div>

aspect-ratio: width / height;

.item-container{
aspect-ratio: 2/1; /*縦2：横1*/
aspect-ratio: 3/2; /*縦3：横2*/
aspect-ratio: 7/4; /*縦7：横4*/
}

aspect-ratio: width;/* 横◯:縦1 */

.item-container{
aspect-ratio: 1; /*縦1：横1*/
aspect-ratio: 2; /*縦2：横1*/
aspect-ratio: 7; /*縦7：横1*/
}

<ul class="card__items">
    <li class="card__item">
      <div class="card__img">
        <img src="画像パス">
      </div>
      <p class="card__text">テキストテキストテキスト</p>
    </li>
    <li class="card__item">
      <div class="card__img">
        <img src="画像パス">
      </div>
      <p class="card__text">テキストテキストテキスト</p>
    </li>
    <li class="card__item">
      <div class="card__img">
        <img src="画像パス">
      </div>
      <p class="card__text">テキストテキストテキスト</p>
    </li>
</ul>

/*---  card全体のスタイルです  ----*/
.card__items{
  display: flex;
  width:100%;
}

.card__item{
  border:1px solid black;
  list-style:none;
  width: calc(33% - 24px *  2 / 3);
  background-color: #FFF;
  border-radius: 4px;
  padding: 13px;
}
.card__item:not(:nth-child(3n + 1)){
  margin-left: 24px;
}
.card__item:nth-child(n + 4){
  margin-top: 24px;
}
/*---  画像  ----*/
.card__img{
  width: 100%; /* 任意の横幅を指定 */
  aspect-ratio: 5 / 3; /* アスペクト比を指定 */
  position:relative;
}

.card__img img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  object-fit: cover;
}
/*---  テキスト  ----*/
.card__text{
  margin-top: 4px;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .card__item{
    display:block;
  }
}