/* Keep the image controls in their own row on phones. The second image
   follows the first image's bounds through car-image-rotation.js. */
@media (max-width: 800px) {
  .film-slide-image.car-image-rotation {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 16px;
  }
  .car-image-rotation > img:first-child {
    min-height: 0;
    justify-self: center;
  }
  .car-image-rotation .car-image-controls {
    position: static;
    transform: none;
    justify-self: center;
    gap: 8px;
  }
  .car-image-rotation .car-image-controls button {
    width: 44px;
    height: 44px;
  }
}