/* paddingハックによる画像比率の固定方法 */
.pading-frame-16-9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 = 9/16 * 100 */
}

.pading-frame-16-9 > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* aspect-ratioを用いて画像比率の固定を実装する */
.frame-16-9 {
  aspect-ratio: 16 / 9;
}
.frame-16-9 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.img-16-9 {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* aspect-ratioを用いたカードレイアウトのサンプル */
.card {
  display: grid;
  box-shadow: var(--shadow--md);
  border-radius: var(--radius--md);
  overflow: hidden;

  /*  実際はカラムの中で使用される想定で、サイズを小さめにしています。  */
  max-width: 600px;
}
.card__media {
  aspect-ratio: 16/9;
}
.card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__content {
  display: grid;
  gap: var(--space--4);
  padding: var(--space--6);
}
.card__title {
  font-size: var(--font-size--md);
}
.card__footer {
  display: flex;
  justify-content: end;
}


/* aspect-ratioを用いた横並びのカートレイアウト */
.card-horizontal {
  display: flex;
  border-radius: var(--radius--md);
  box-shadow: var(--shadow--lg);
  overflow: hidden;
}
.card-horizontal__content {
  flex-grow: 1;
  padding: var(--space--4);
  align-self: center;
}
.card-horizontal__content > h3 {
  font-size: var(--font-size--md);
}
.card-horizontal__content > p {
  font-size: var(--font-size--sm);
  margin-top: var(--space--2);
}
.card-horizontal__image {
  aspect-ratio: 1 / 1;
  width: 25%;
  flex-shrink: 0;
}
.card-horizontal__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 従来のpaddingハックを用いた横並びのカートレイアウト */
.card-horizontal__padding-ratio {
  width: 25%;
  flex-shrink: 0;
}
.card-horizontal__padding-ratio > figure {
  position: relative;
  padding-top: 100%; /*  1:1  */
  width: 100%;
}
.card-horizontal__padding-ratio > figure > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
