/* padding hack */
.pading-frame-16-9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.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 layout */
.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 */
.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 hack 横並びcard */
.card-horizontal__padding-ratio {
    width: 25%;
    flex-shrink: 0;
}
.card-horizontal__padding-ratio > figure {
    position: relative;
    padding-top: 100%;
    width: 100%;
}
.card-horizontal__padding-ratio > figure > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}