:root {
			/**
			 * Do some Math
			 * 1. Got a container. 100vw - 2rem wide.
			 * 2. Minus the left padding of 10vw.
			 * 3. Split up into fractions.
			 * 4. Give equally.
			 * 5. Multiply by the aspect ratios defined.
			 * 6. Work out distance to travel based on that.
			 * */
			 @media screen and (min-width: 916px) {
				--left-pad: calc(48px + 2rem);
			 }
			 --container-width: calc(100vw - 1rem - var(--left-pad));
			 --column-one: calc(var(--container-width) * (1.2 / 3.2));
			 --column-exp: calc(var(--container-width) * (0.9 / 3.2));
			 --column-two: calc(var(--container-width) * (2 / 3.2));
			 --col-one-height: min(70vh, calc((380 / 272) * var(--column-one)));
			 --col-two-height: min(110vh, calc((1148 / 940) * var(--column-two)));
			 --col-exp-height: min(110vh, calc((1148 / 940) * var(--column-exp)));
			 --catch-up: calc(var(--col-two-height) - var(--col-one-height));
			/*	Fractions are 1.2 + 2 === 3 */
			--heading: clamp(2rem, 6vw + 1rem, 10rem);
		}
		
		body {
            margin: 0;
			display: flex;
			flex-direction: column;
			flex: auto;
			min-height: 100vh;
			font-family:  "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
		}
		:where(main, section) {
			width: 100%;
		}

        nav {
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            border-bottom: 1px solid hsl(0, 0%, 36%);
            /*height: 52px;
            background: hsla(0, 0%, 66%, 0.75);
            -webkit-backdrop-filter: blur(4px);
                    backdrop-filter: blur(4px);*/
            z-index: 5;
        }
        
        .menu {
          padding-left: 0;
          margin-top: 0;
          margin-bottom: 0;
          list-style: none;
          background: rgb(229, 28, 28);
          display: none;
          li {
              border-bottom: 1px solid #000000;
              text-align: center;
              &:last-child {
                  border: none;
              }
          }
        
          a{
              color: #eee;
              text-decoration: none;
              line-height: 3;
              display: block;
              font-weight: bold;
              font-size: .9em;
              &:hover {
                  background: rgb(190, 12, 12);
              }
          }
          @media screen and (min-width: 768px) {
              display: flex;
              li {
                  flex: auto;
                  border-right: 1px solid #000000;
                  border-bottom: none;
              }        
          }
        }
        
        #toggle-menu {
          background: rgb(190, 12, 12);
          line-height: 2.5;
          color: #fff;
          padding-left: 1em;
          font-size: .9em;
          cursor: pointer;
          @media screen and (min-width: 768px) {
              display: none;        
          }
        }
		
		header {
			height: 20vh;
			@media screen and (min-width: 915px) {
				height: 100vh;
			}
			padding-top: 5vh;
			margin-bottom: 10vh;
			place-items: center;
		}
		section:last-of-type {
			height: 50vh;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			place-items: center;
			align-content: center;
		}
		
		section:last-of-type h2:last-of-type {
			font-size: calc(var(--heading) * 0.15);
			text-transform: uppercase;
		}
		img {
			background: hsl(0 0% 90%);
			width: 100%;
			height: 100%;
			border-radius: 6px;
			-o-object-fit: cover;
			   object-fit: cover;
			mix-blend-mode: plus-lighter;
			@media screen and (max-width: 915px) {
				mix-blend-mode: multiply;
			}
		}
		
		footer {
			padding: 2rem;
		}
		
		h1 {
			font-size: var(--heading);
			margin: 0;
			position: relative;
			@media screen and (max-width: 768px) {
				font-size: calc(var(--heading) * 1.35);
			}
		}
		h1 span {
			position: absolute;
			bottom: 100%;
			left: 50%;
			display: inline-block;
			translate: -50% 50%;
			font-size: calc(var(--heading) * 0.2);
			text-transform: uppercase;
			color: hsl(6 100% 50%);
			@media screen and (max-width: 768px) {
				font-size: calc(var(--heading) * 0.40);
			}
		}
		h2 {
			font-size: calc(var(--heading) * 0.8);
			@media screen and (max-width: 768px) {
				font-size: calc(var(--heading) * 0.7);
			}
		}
		section > h2 {
			text-align: center;
		}
		header h2 {
			text-transform: uppercase;
			opacity: 0.8;
			font-size: calc(var(--heading) * 0.25);
			@media screen and (max-width: 768px) {
				font-size: calc(var(--heading) * 0.35);
			}
		}
		:where(h1, h2, p) {
			margin: 0;
		}
		main {
			display: flex;
			flex-direction: column;
			gap: 12rem;
		}
		
		
		/* The main container that splits the two columns */
		
		.image-box {
			display: grid;
			gap: 1rem;
			padding: 1rem 1rem 1rem var(--left-pad);
			@media screen and (min-width: 916px) {
				min-height: 100vh;				
			}
			grid-template-columns: 1.2fr 2fr;
		}
		
		section:nth-of-type(2) .image-box,
		section:nth-of-type(4) .image-box {
			grid-template-columns: 2fr 1.2fr;
		}
		
		/* Swapper container */
		.swapper {
			height: var(--col-one-height);
			width: 100%;
			position: relative;
			transform: translate3d(0, 0, 0);
			border-radius: 6px;
		  isolation: isolate;
		  @media screen and (max-width: 915px) {
			display: none;
		  }
		  
		}
		
		.swapper img:first-of-type {
			opacity: 0;
		}
		
		.progress {
			position: absolute;
			height: min(100px, 15%);
			width: 6px;
			top: 50%;
			translate: 0 -50%;
			display: flex;
			flex-direction: column;
			gap: 5%;
			z-index: 10;
			@media screen and (max-width: 915px) {
			display: none;
		  }
		}
		
		.progress > div {
			border-radius: 100px;
			background: hsl(0 0% 100% / 0.25);
			transition: flex 0.25s ease-in-out;
		}
		
		.progress > div {
			flex: 10;
			position: relative;
		}
		
		.progress div > div {
			position: absolute;
			top: 0;
			width: 100%;
			border-radius: 100px;
			height: 0%;
			background: white;
		}
		
		.progress > div:last-of-type {
			flex: calc(1 + (var(--flip, 0) * 99));
		}
		
		.swapper:first-of-type .progress {
			right: 6px;
		}
		.swapper:last-of-type .progress {
			left: 6px;
		}
		
		.caption {
			position: absolute;
			bottom: 100%;
			padding: 1rem;
			font-size: 18px;
			width: 80ch;
			max-width: 90%;
			text-align: justify;
			right: 35px;
			text-transform: uppercase;
			display: grid;
			gap: 0.25rem;
			@media screen and (max-width: 915px){
				display: flex;
				flex-direction: column;
				padding-top: 90px;
				font-size: 8px;	
				right: 0;			
			}
		}

		.movil-caption {
			display: none;
			@media screen and (max-width: 915px) {
				display: flex;
				flex: auto;
				flex-direction: column;
				text-align: justify;
				align-items: center;
				justify-items: center;
				font-size: medium;
				gap: 0.25rem;
                margin: 4px;
				a img{
					width: 10%;
				}
			}
		}
		
		.caption h2 {
			font-size: 42px;
			@media screen and (max-width: 915px){
				display: flex;
				font-size: 8px;				
			}
		}
		.swapper img {
			position: absolute;
			@media screen and (max-width: 915px){
				display: none;				
			}
		}
		
		.controller {
			display: flex;
			height: var(--col-exp-height);
			width: auto;
			border-radius: 6px;
			@media screen and (max-width: 915px) {
				flex-direction: column;
			}
		}

		video {
			/*-o-object-fit: contain;*/
	   		object-fit: contain;
			width: 100%;
		}
		
		.swapper, .controller {
			background: black;
			@media screen and (max-width: 915px) {
				background: white;
			}
		}
		
		@supports (animation-timeline: scroll()) {
			@property --flip {
				inherits: true;
				initial-value: 0;
				syntax: '<number>';
			}
			@-webkit-keyframes fade { to { opacity: 0; }}
			@keyframes fade { to { opacity: 0; }}
			@-webkit-keyframes fill-up { to { height: 100%; }}
			@keyframes fill-up { to { height: 100%; }}
			@-webkit-keyframes move { to { translate: 0 var(--catch-up); }}
			@keyframes move { to { translate: 0 var(--catch-up); }}
			@-webkit-keyframes flip { to { --flip: 1; }}
			@keyframes flip { to { --flip: 1; }}
		
			.image-box {
				/* The ViewTimeline for use by the children */
				view-timeline: --container;
			}
		
			.swapper {
				/* Translates from top to bottom of the container	*/
				-webkit-animation: move both linear, flip both steps(1);
						animation: move both linear, flip both steps(1);
				animation-timeline: --container, view();
				animation-range: 50vh calc(100vh + (var(--col-two-height) * 0.25)), cover 50% cover 50%;
			}
		
			.swapper img {
				-webkit-animation: fade both linear;
						animation: fade both linear;
				animation-timeline: view();
				animation-range: cover 45% cover 55%;
				@media screen and (max-width: 915px) {
					display: none;
		  		}
			}
		
			.swapper img:first-of-type {
				opacity: 1;
				animation-direction: reverse;
			}
		
			.progress div > div {
				-webkit-animation: fill-up both linear;
						animation: fill-up both linear;
				animation-timeline: --container;
			}
			.progress div:first-of-type > div {
				animation-range: 50vh calc(50vh + (var(--col-two-height) * 0.125));
			}
			.progress div:last-of-type > div {
				animation-range: calc(75vh + (var(--col-two-height) * 0.25)) calc(100vh + (var(--col-two-height) * 0.25))
			}
		
			@media(max-width: 915px) {
				.controller {
					height: calc(var(--col-two-height) * 1.5);
				}
				.swapper {
					view-timeline-name: --swapper;
					width: 65%;
					min-width: 300px;
					height: calc(var(--col-one-height) * 2);
					-webkit-animation: flip both steps(1, end);
							animation: flip both steps(1, end);
					animation-timeline: view();
					animation-range: 50vh calc(75vh + (var(--col-two-height) * 0.25));
				}
				.swapper img {
					mix-blend-mode: normal;
					animation-timeline: view();
				}
				.progress div > div {
					animation-timeline: --swapper;
				}
			}
		}
		
		@media(max-width: 915px) {
			main {
				gap: 6rem;
			}
			section .image-box {
				display: flex;
				flex-direction: column;
				gap: 8rem;
			}
		}
		
		a img{
			background: hsl(0, 0%, 100%);
			width: 8%;
			height: 35%;
		}