Calendar {% include 'components/advent/calendar' %}
HTML
<div class="advent-calendar">
<div class="inner">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/Main_Tagline_Desktop.png /images/mainsite5/big-quiz-night/Main_Tagline_Desktop@2x.png 2x">
<img src="/images/mainsite5/advent/Main_Tagline_Desktop.png" alt="Chefs">
</picture>
<p>Intro copy for the calendar</p>
<div class="advent-calendar-grid">
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--1">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door1_Desktop.jpg, /images/mainsite5/advent/doors/Door1_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door1_Mobile_Closed.png, /images/mainsite5/advent/doors/Door1_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door1_Desktop.jpg" alt="Advent Door 1" title="Advent Door 1">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door1_Mobile_Open.png, /images/mainsite5/advent/doors/Door1_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door1_Desktop.jpg" alt="Advent Door 1" title="Advent Door 1">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day1.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day1@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day1.jpg" alt="Advent Door 1" title="Advent Door 1">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--2">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door2_Desktop.jpg, /images/mainsite5/advent/doors/Door2_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door2_Mobile_Closed.png, /images/mainsite5/advent/doors/Door2_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door2_Desktop.jpg" alt="Advent Door 2" title="Advent Door 2">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door2_Mobile_Open.png, /images/mainsite5/advent/doors/Door2_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door2_Desktop.jpg" alt="Advent Door 2" title="Advent Door 2">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day2.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day2@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day2.jpg" alt="Advent Door 2" title="Advent Door 2">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--3">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door3_Desktop.jpg, /images/mainsite5/advent/doors/Door3_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door3_Mobile_Closed.png, /images/mainsite5/advent/doors/Door3_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door3_Desktop.jpg" alt="Advent Door 3" title="Advent Door 3">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door3_Mobile_Open.png, /images/mainsite5/advent/doors/Door3_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door3_Desktop.jpg" alt="Advent Door 3" title="Advent Door 3">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day3.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day3@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day3.jpg" alt="Advent Door 3" title="Advent Door 3">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--4">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door4_Desktop.jpg, /images/mainsite5/advent/doors/Door4_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door4_Mobile_Closed.png, /images/mainsite5/advent/doors/Door4_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door4_Desktop.jpg" alt="Advent Door 4" title="Advent Door 4">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door4_Mobile_Open.png, /images/mainsite5/advent/doors/Door4_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door4_Desktop.jpg" alt="Advent Door 4" title="Advent Door 4">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day4.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day4@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day4.jpg" alt="Advent Door 4" title="Advent Door 4">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--5">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door5_Desktop.jpg, /images/mainsite5/advent/doors/Door5_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door5_Mobile_Closed.png, /images/mainsite5/advent/doors/Door5_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door5_Desktop.jpg" alt="Advent Door 5" title="Advent Door 5">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door5_Mobile_Open.png, /images/mainsite5/advent/doors/Door5_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door5_Desktop.jpg" alt="Advent Door 5" title="Advent Door 5">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day5.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day5@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day5.jpg" alt="Advent Door 5" title="Advent Door 5">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--6">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door6_Desktop.jpg, /images/mainsite5/advent/doors/Door6_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door6_Mobile_Closed.png, /images/mainsite5/advent/doors/Door6_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door6_Desktop.jpg" alt="Advent Door 6" title="Advent Door 6">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door6_Mobile_Open.png, /images/mainsite5/advent/doors/Door6_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door6_Desktop.jpg" alt="Advent Door 6" title="Advent Door 6">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day6.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day6@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day6.jpg" alt="Advent Door 6" title="Advent Door 6">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--7">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door7_Desktop.jpg, /images/mainsite5/advent/doors/Door7_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door7_Mobile_Closed.png, /images/mainsite5/advent/doors/Door7_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door7_Desktop.jpg" alt="Advent Door 7" title="Advent Door 7">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door7_Mobile_Open.png, /images/mainsite5/advent/doors/Door7_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door7_Desktop.jpg" alt="Advent Door 7" title="Advent Door 7">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day7.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day7@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day7.jpg" alt="Advent Door 7" title="Advent Door 7">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--8">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door8_Desktop.jpg, /images/mainsite5/advent/doors/Door8_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door8_Mobile_Closed.png, /images/mainsite5/advent/doors/Door8_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door8_Desktop.jpg" alt="Advent Door 8" title="Advent Door 8">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door8_Mobile_Open.png, /images/mainsite5/advent/doors/Door8_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door8_Desktop.jpg" alt="Advent Door 8" title="Advent Door 8">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day8.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day8@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day8.jpg" alt="Advent Door 8" title="Advent Door 8">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--9">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door9_Desktop.jpg, /images/mainsite5/advent/doors/Door9_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door9_Mobile_Closed.png, /images/mainsite5/advent/doors/Door9_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door9_Desktop.jpg" alt="Advent Door 9" title="Advent Door 9">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door9_Mobile_Open.png, /images/mainsite5/advent/doors/Door9_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door9_Desktop.jpg" alt="Advent Door 9" title="Advent Door 9">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day9.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day9@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day9.jpg" alt="Advent Door 9" title="Advent Door 9">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--10">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door10_Desktop.jpg, /images/mainsite5/advent/doors/Door10_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door10_Mobile_Closed.png, /images/mainsite5/advent/doors/Door10_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door10_Desktop.jpg" alt="Advent Door 10" title="Advent Door 10">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door10_Mobile_Open.png, /images/mainsite5/advent/doors/Door10_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door10_Desktop.jpg" alt="Advent Door 10" title="Advent Door 10">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day10.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day10@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day10.jpg" alt="Advent Door 10" title="Advent Door 10">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--11">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door11_Desktop.jpg, /images/mainsite5/advent/doors/Door11_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door11_Mobile_Closed.png, /images/mainsite5/advent/doors/Door11_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door11_Desktop.jpg" alt="Advent Door 11" title="Advent Door 11">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door11_Mobile_Open.png, /images/mainsite5/advent/doors/Door11_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door11_Desktop.jpg" alt="Advent Door 11" title="Advent Door 11">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day11.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day11@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day11.jpg" alt="Advent Door 11" title="Advent Door 11">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--12">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door12_Desktop.jpg, /images/mainsite5/advent/doors/Door12_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door12_Mobile_Closed.png, /images/mainsite5/advent/doors/Door12_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door12_Desktop.jpg" alt="Advent Door 12" title="Advent Door 12">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door12_Mobile_Open.png, /images/mainsite5/advent/doors/Door12_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door12_Desktop.jpg" alt="Advent Door 12" title="Advent Door 12">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day12.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day12@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day12.jpg" alt="Advent Door 12" title="Advent Door 12">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--13">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door13_Desktop.jpg, /images/mainsite5/advent/doors/Door13_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door13_Mobile_Closed.png, /images/mainsite5/advent/doors/Door13_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door13_Desktop.jpg" alt="Advent Door 13" title="Advent Door 13">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door13_Mobile_Open.png, /images/mainsite5/advent/doors/Door13_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door13_Desktop.jpg" alt="Advent Door 13" title="Advent Door 13">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day13.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day13@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day13.jpg" alt="Advent Door 13" title="Advent Door 13">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--14">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door14_Desktop.jpg, /images/mainsite5/advent/doors/Door14_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door14_Mobile_Closed.png, /images/mainsite5/advent/doors/Door14_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door14_Desktop.jpg" alt="Advent Door 14" title="Advent Door 14">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door14_Mobile_Open.png, /images/mainsite5/advent/doors/Door14_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door14_Desktop.jpg" alt="Advent Door 14" title="Advent Door 14">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day14.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day14@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day14.jpg" alt="Advent Door 14" title="Advent Door 14">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--15">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door15_Desktop.jpg, /images/mainsite5/advent/doors/Door15_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door15_Mobile_Closed.png, /images/mainsite5/advent/doors/Door15_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door15_Desktop.jpg" alt="Advent Door 15" title="Advent Door 15">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door15_Mobile_Open.png, /images/mainsite5/advent/doors/Door15_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door15_Desktop.jpg" alt="Advent Door 15" title="Advent Door 15">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day15.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day15@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day15.jpg" alt="Advent Door 15" title="Advent Door 15">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--16">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door16_Desktop.jpg, /images/mainsite5/advent/doors/Door16_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door16_Mobile_Closed.png, /images/mainsite5/advent/doors/Door16_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door16_Desktop.jpg" alt="Advent Door 16" title="Advent Door 16">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door16_Mobile_Open.png, /images/mainsite5/advent/doors/Door16_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door16_Desktop.jpg" alt="Advent Door 16" title="Advent Door 16">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day16.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day16@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day16.jpg" alt="Advent Door 16" title="Advent Door 16">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--17">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door17_Desktop.jpg, /images/mainsite5/advent/doors/Door17_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door17_Mobile_Closed.png, /images/mainsite5/advent/doors/Door17_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door17_Desktop.jpg" alt="Advent Door 17" title="Advent Door 17">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door17_Mobile_Open.png, /images/mainsite5/advent/doors/Door17_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door17_Desktop.jpg" alt="Advent Door 17" title="Advent Door 17">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day17.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day17@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day17.jpg" alt="Advent Door 17" title="Advent Door 17">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--18">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door18_Desktop.jpg, /images/mainsite5/advent/doors/Door18_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door18_Mobile_Closed.png, /images/mainsite5/advent/doors/Door18_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door18_Desktop.jpg" alt="Advent Door 18" title="Advent Door 18">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door18_Mobile_Open.png, /images/mainsite5/advent/doors/Door18_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door18_Desktop.jpg" alt="Advent Door 18" title="Advent Door 18">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day18.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day18@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day18.jpg" alt="Advent Door 18" title="Advent Door 18">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--19">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door19_Desktop.jpg, /images/mainsite5/advent/doors/Door19_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door19_Mobile_Closed.png, /images/mainsite5/advent/doors/Door19_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door19_Desktop.jpg" alt="Advent Door 19" title="Advent Door 19">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door19_Mobile_Open.png, /images/mainsite5/advent/doors/Door19_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door19_Desktop.jpg" alt="Advent Door 19" title="Advent Door 19">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day19.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day19@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day19.jpg" alt="Advent Door 19" title="Advent Door 19">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--20">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door20_Desktop.jpg, /images/mainsite5/advent/doors/Door20_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door20_Mobile_Closed.png, /images/mainsite5/advent/doors/Door20_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door20_Desktop.jpg" alt="Advent Door 20" title="Advent Door 20">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door20_Mobile_Open.png, /images/mainsite5/advent/doors/Door20_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door20_Desktop.jpg" alt="Advent Door 20" title="Advent Door 20">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day20.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day20@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day20.jpg" alt="Advent Door 20" title="Advent Door 20">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--21">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door21_Desktop.jpg, /images/mainsite5/advent/doors/Door21_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door21_Mobile_Closed.png, /images/mainsite5/advent/doors/Door21_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door21_Desktop.jpg" alt="Advent Door 21" title="Advent Door 21">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door21_Mobile_Open.png, /images/mainsite5/advent/doors/Door21_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door21_Desktop.jpg" alt="Advent Door 21" title="Advent Door 21">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day21.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day21@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day21.jpg" alt="Advent Door 21" title="Advent Door 21">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--22">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door22_Desktop.jpg, /images/mainsite5/advent/doors/Door22_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door22_Mobile_Closed.png, /images/mainsite5/advent/doors/Door22_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door22_Desktop.jpg" alt="Advent Door 22" title="Advent Door 22">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door22_Mobile_Open.png, /images/mainsite5/advent/doors/Door22_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door22_Desktop.jpg" alt="Advent Door 22" title="Advent Door 22">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day22.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day22@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day22.jpg" alt="Advent Door 22" title="Advent Door 22">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--23">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door23_Desktop.jpg, /images/mainsite5/advent/doors/Door23_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door23_Mobile_Closed.png, /images/mainsite5/advent/doors/Door23_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door23_Desktop.jpg" alt="Advent Door 23" title="Advent Door 23">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door23_Mobile_Open.png, /images/mainsite5/advent/doors/Door23_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door23_Desktop.jpg" alt="Advent Door 23" title="Advent Door 23">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day23.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day23@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day23.jpg" alt="Advent Door 23" title="Advent Door 23">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--24">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door24_Desktop.jpg, /images/mainsite5/advent/doors/Door24_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door24_Mobile_Closed.png, /images/mainsite5/advent/doors/Door24_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door24_Desktop.jpg" alt="Advent Door 24" title="Advent Door 24">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door24_Mobile_Open.png, /images/mainsite5/advent/doors/Door24_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door24_Desktop.jpg" alt="Advent Door 24" title="Advent Door 24">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day24.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day24@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day24.jpg" alt="Advent Door 24" title="Advent Door 24">
</picture>
</div>
</div>
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--25">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door25_Desktop.jpg, /images/mainsite5/advent/doors/Door25_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door25_Mobile_Closed.png, /images/mainsite5/advent/doors/Door25_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door25_Desktop.jpg" alt="Advent Door 25" title="Advent Door 25">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door25_Mobile_Open.png, /images/mainsite5/advent/doors/Door25_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door25_Desktop.jpg" alt="Advent Door 25" title="Advent Door 25">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day25.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day25@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day25.jpg" alt="Advent Door 25" title="Advent Door 25">
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="advent-calendar__footer"></div>
Twig
<div class="advent-calendar">
<div class="inner">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/Main_Tagline_Desktop.png /images/mainsite5/big-quiz-night/Main_Tagline_Desktop@2x.png 2x">
<img src="/images/mainsite5/advent/Main_Tagline_Desktop.png" alt="Chefs">
</picture>
<p>Intro copy for the calendar</p>
<div class="advent-calendar-grid">
{% for i in 1..25 %}
<div class="advent-calendar-door advent-calendar-door--opened advent-calendar-door--{{ i }}">
<div class="advent-calendar-door__front">
<picture class="closed-doors">
<source media="(min-width: 647px)" srcset="/images/mainsite5/advent/doors/Door{{ i }}_Desktop.jpg, /images/mainsite5/advent/doors/Door{{ i }}_Desktop@2x.jpg 2x">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door{{ i }}_Mobile_Closed.png, /images/mainsite5/advent/doors/Door{{ i }}_Mobile_Closed@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door{{ i }}_Desktop.jpg" alt="Advent Door {{ i }}" title="Advent Door {{ i }}">
</picture>
<picture class="opened-doors">
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/doors/Door{{ i }}_Mobile_Open.png, /images/mainsite5/advent/doors/Door{{ i }}_Mobile_Open@2x.png 2x">
<img src="/images/mainsite5/advent/doors/Door{{ i }}_Desktop.jpg" alt="Advent Door {{ i }}" title="Advent Door {{ i }}">
</picture>
</div>
<div class="advent-calendar-door__behind">
<picture>
<source media="(min-width: 375px)" srcset="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day{{ i }}.jpg, /images/mainsite5/advent//door-behind/BehindDoor_1000x1000px_Day{{ i }}@2x.jpg 2x">
<img src="/images/mainsite5/advent/door-behind/BehindDoor_1000x1000px_Day{{ i }}.jpg" alt="Advent Door {{ i }}" title="Advent Door {{ i }}">
</picture>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="advent-calendar__footer"></div>
{}
Intro copy for the calendar
