.creation-video { aspect-ratio: 16 / 9; background: #000; }
.creation-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.animation-preview { display: block; position: relative; width: 100%; height: 100%; border: 0; padding: 0; background: #000; cursor: pointer; overflow: hidden; }
.animation-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.animation-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #f2e9d7bb; border-radius: 50%; background: #171217b3; color: #f2e9d7; font: 17px Arial, sans-serif; padding-left: 3px; }
.animation-preview:hover .animation-play { background: #201820; border-color: #b7925e; }

.creation-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

.creations-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-block: 36px; }
.creations-sections .clip-preview { height: 230px; display: grid; place-items: center; background: transparent; border: 0; }
.creations-sections .clip-preview img { height: 100%; object-fit: contain; }
.creations-sections .clip-list-heading { margin-top: 12px; text-align: center; }
@media (max-width: 520px) { .creations-sections { grid-template-columns: 1fr; } }