.media-container {
  display: flex;
  justify-content: center;
  align-items: center; /* Vertically aligns items */
  gap: 20px;
  margin: 20px 0;
}

.media-item img {
  width: 898px;
  height: 533px;
  object-fit: contain; /* Ensures full image is visible */
}

.media-item video {
  height: 533px; /* Matches image height */
  width: auto; /* Maintains aspect ratio */
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .media-container {
    flex-direction: column;
  }
  
  .media-item img {
    width: 100%;
    max-width: 898px;
    height: auto;
  }
  
  .media-item video {
    width: 478px; /* Original video width */
    height: auto;
  }
}