.gap-x-4 {
    column-gap: 1rem;
    /* 16px */
}

.gap-x-6 {
    column-gap: 1.5rem;
    /* 24px */
}
.gap-x-8 {
    column-gap: 1.5rem;
    /* 24px */
}


.col-span-full {
    grid-column: 1 / -1;
}


@media screen and (min-width: 751px) {
    .md\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .md\:grid {
        display: grid;
    }

    .video-wrapper {
        max-width: 70%;
        margin:0 auto;
    }


    .md\:col-span-4 {
        grid-column: span 4 / span 4;

    }
    .md\:col-span-6 {
        grid-column: span 6 / span 6;
    }
    .md\:col-span-8 {
        grid-column: span 8 / span 8;

    }
    .md\:col-start-5 {
        grid-column-start: 5;
    }

    .md\:col-span-4 img.fit {
        width: 100%;
        aspect-ratio: 16 / 9;
        /* ← 画像領域の比率を固定 */
        object-fit: cover;
        /* ← はみ出す部分はトリミング */
        display: block;
    }
}