Add additional classes for interactivity and placement.

wrap image and video in div to address in js/css
Add hidden classes.
split joke answer from joke question.

templates/content-advent_day.php

 <div class="calendar_day_cell">
-	<h2 <?php post_class() ?>>
+	<h2 <?php post_class('middle') ?>>
 		<?php the_title(); ?>
 	</h2>
 
@@ -10,10 +10,16 @@
 	$alt_tag = ! empty( $alt ) ? sprintf( 'alt="%s"', esc_attr( $alt ) ) : '';
 	if ( isset( $image ) && $image['id'] ) {
 		?>
-		<img id="advent-image" src="<?php echo wp_get_attachment_url( $image['id'] ); ?>" <?php echo $alt_tag; ?>>
+		<div class="day-image hidden">
+			<img id="advent-image" src="<?php echo wp_get_attachment_url( $image['id'] ); ?>" <?php echo $alt_tag; ?>>
+		</div>
 		<?php
 	} elseif ( isset( $video ) ) {
-		echo $video;
+		?>
+		<div class="day-image hidden">
+			<?php echo $video; ?>
+		</div>
+		<?php
 	}
 	$motto         = get_field( 'acd_short_message' );
 	$joke_question = get_field( 'acd_joke_question' );
@@ -21,13 +27,13 @@
 	switch ( get_field( 'acd_motto_or_joke' ) ) {
 		case 'motto':
 			?>
-			<p class="advent-motto"><?php echo esc_html( $motto ); ?></p>
+			<p class="advent-motto hidden"><?php echo esc_html( $motto ); ?></p>
 			<?php
 			break;
 		case 'joke':
 			?>
-			<p class="advent-joke"><?php echo esc_html( $joke_question ); ?><span class="advent-joke-answer"><?php echo esc_html( $joke_answer ); ?></span>
-			</p>
+			<p class="advent-motto hidden"><?php echo esc_html( $joke_question ); ?></p>
+			<p class="advent-joke-answer hidden2"><?php echo esc_html( $joke_answer ); ?></p>
 
 			<?php
 			break;