main > section:has(.hero-banner):first-of-type > *:first-child
		{
			margin-top: 0px;
		}
		
		@media print
		{
			.hero-banner
			{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				grid-gap: 1cm;
				justify-content: center;
			}
			.hero-banner > div
			{
				display: contents;
			}
			.hero-banner > div > *
			{
				width: 38.19%;				
			}
			.hero-banner > div img
			{
				border-radius: 1cm;
			}
			.hero-controls
			{
				display: none;
			}
		}
		@media screen
		{
			.hero-banner
			{
				margin: auto;
				height: auto;
				overflow: auto;
				scroll-snap-type: x mandatory;
				scroll-behavior: smooth;
				position: relative;
				display: grid;
				grid-auto-flow: column;
				justify-items: center;
				grid-gap: var(--padding-main-horizontal);
				scroll-margin-top: 40px;
				width: var(--width-main);	
				margin-top: var(--margin-section-gap);			
			}			
			
			body.jse .hero-banner > .banner > a
			{
				user-select: none;
				-webkit-user-drag: none;
			}			
			
			.hero-banner > div
			{
				display: grid;
				height: auto;
				user-select: none;
				grid-auto-flow: column;
				width: var(--width-main);
				scroll-snap-align: center;
				min-height: min(60vh, 400px);
				max-height: min(auto, 60vh);
			}
			.hero-banner > div *
			{
				display: block;
				height: auto;
				width: 100%;
				user-select: none;
			}
			.hero-banner > div picture
			{
				max-height: 512px;
			}
			.hero-banner > div img
			{
				object-fit: cover;				
				width: 100%;
				height: 100%;
			}

			.hero-links
			{
				margin: 0px auto;
				display: grid;
				justify-items: center;
				grid-auto-flow: column;
				justify-content: center;
				grid-gap: 0px;
				top: calc(100% - 32px);
			}

			.hero-links > label > input[type="radio"]
			{
				display: none;
			}

			.hero-links > label
			{
				display: block;
				background: var(--colour-base);
				box-shadow: 0px 1px 2px 0px #000A;
				width: 20px;
				height: 20px;
				pointer-events: all;
				mask-image: url('/index/spot.svg');
				mask-repeat: no-repeat;
				mask-size: 20px 20px;
				mask-position: center center;
			}

			.hero-links > label:hover
			{
				background: var(--colour-main);
			}

			.hero-links > label:has(:checked),
			.hero-links > label:hover:has(:checked)
			{
				background: var(--colour-main);
				mask-image: url('/index/spot-selected.svg');
				mask-repeat: no-repeat;
				mask-size: 20px 20px;
				mask-position: center center;
			}

			.hero-controls
			{
				display: none;
			}

			.hero-controls:has(> .hero-links > label ~ label)
			{
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				background: transparent;
				top: 0px;
				pointer-events: none;
			}
			

			.hero-controls > a
			{
				display: none;
				position: absolute;
				top: calc(50% - 10px);
				width: 40px;
				height: 40px;
				background: var(--colour-base);
				opacity: 64%;
				border-radius: var(--radius-radio-button);
				pointer-events: all;
				cursor: pointer;
			}
			.hero-controls > a:hover
			{
				opacity: 100%;
				box-shadow: 0px 1px 2px 0px #000A;
			}
			.hero-controls > a:after
			{
				content: '';
				position: absolute;
				background-color: var(--colour-main-text);
				mask-size: contain;
				mask-position: center center;
				mask-repeat: no-repeat;
				display: inline-block;
				width: 50%;
				height: 50%;
				mask-image: url(/index/up.svg);
				top: 25%;
			}
			.hero-controls > a.left:after
			{
				transform: rotate(270deg);
				left: calc(25% - 2px);
			}
			.hero-controls > a.right:after
			{
				transform: rotate(90deg);
				right: calc(25% - 2px);
			}
			.hero-controls > a.play:after
			{
				mask-image: url(/index/play.svg);
				right: calc(25% - 2px);
				top: calc(25% - 2px);
			}
			.hero-controls > a.play.pause:after
			{
				mask-image: url(/index/pause.svg);
				left: calc(25% - 2px);
			}
			
			.hero-controls > a.left
			{
				left: calc(var(--padding-main-horizontal) + 16px);
			}
			.hero-controls > a.right
			{
				right: calc(var(--padding-main-horizontal) + 16px);
			}
			
			.hero-banner > .banner > .overlay
			{
				position: absolute;
				left: 40px;
				width: calc(100% - 80px);
				max-width: 456px;
				bottom: 40px;
				height: 50%;
				display: grid;
				grid-gap: 16px;
				align-content: center;
				justify-content: start;
				z-index: 1;				
			}	
			.hero-banner > .banner > .overlay + picture:after
			{
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;				
				top: 0;
				left: 0;
				background: #000;
				opacity: .33;
			}			
			.hero-banner > .banner > .overlay > h1
			{				
				font-size: var(--font-size-banner-header);
				font-weight: var(--font-weight-extra-bold);
				color: var(--colour-base);
				text-shadow: 0px 2px 3px rgba(0,0,0,0.33);	
				text-wrap: balance;
			}
			.hero-banner > .banner > .overlay > p
			{
				font-size: var(--font-size-banner-text);
				color: var(--colour-base);				
				text-wrap: balance;
				line-height: 133%;
			}
			.hero-banner > .banner > .overlay > .button
			{
				width: fit-content;
			}
			
		}	

		@media (min-width: 737px)
		{
			.hero-banner > .banner > .overlay
			{
				bottom: auto;
				top: 50%;
				transform: translateY(-50%);
			}
			.hero-banner > div picture
			{
				max-height: 400px;
			}			
		}

		@media (min-width: 800px)
		{
			.hero-banner:hover ~ .hero-controls > a,
			.hero-banner ~ .hero-controls:hover > a,
			.hero-banner ~ .hero-controls > a:hover
			{
				display: block;
			}
			.hero-controls > a.play
			{
				right: 98px;
			}
		}

		@media (min-width: 1024px)
		{

			.hero-controls > a.play
			{
				right: 109px;
			}
			
			.hero-banner > .banner > .overlay
			{
				left: 80px;
				width: calc(100% - 440px);				
			}			
		}

		@media (min-width: 1440px)
		{			
			.hero-controls > a.play
			{
				right: 184px;
			}
		}
			
		
			
		.hero-banner[data-group-type="2"],
		.hero-banner[data-group-type="3"]		
		{
			padding-bottom: 32px;
			grid-gap: var(--grid-gap-standard);
		}
		.hero-banner[data-group-type="2"] + script + .hero-controls .hero-links,
		.hero-banner[data-group-type="3"] + script + .hero-controls .hero-links
		{
			top: calc(100% - 24px);			
		}
		.hero-banner[data-group-type="2"] + script + .hero-controls .hero-links > label,
		.hero-banner[data-group-type="3"] + script + .hero-controls .hero-links > label
		{
			background: var(--colour-main-unselected);
		}
		.hero-banner[data-group-type="2"] + script + .hero-controls .hero-links > label:has(:checked),
		.hero-banner[data-group-type="2"] + script + .hero-controls .hero-links > label:hover,		
		.hero-banner[data-group-type="3"] + script + .hero-controls .hero-links > label:has(:checked),
		.hero-banner[data-group-type="3"] + script + .hero-controls .hero-links > label:hover
		{
			background: var(--colour-main);
		}
		
		@media (min-width: 800px)
		{
			.hero-banner[data-group-type="2"] > div,
			.hero-banner[data-group-type="3"] > div
			{
				grid-gap: var(--grid-gap-standard);
				width: calc((var(--width-main) - var(--grid-gap-standard-horizontal) - var(--grid-gap-standard-horizontal)) / 2);												
			}
		}		
		
		@media (min-width: 1024px)
		{				
			.hero-banner[data-group-type="3"] > div
			{
				grid-gap: var(--grid-gap-standard);
				width: calc((var(--width-main) - var(--grid-gap-standard-horizontal) - var(--grid-gap-standard-horizontal) - var(--grid-gap-standard-horizontal)) / 3);												
			}			
			.hero-banner[data-group-type="3"] + script + .hero-controls .hero-links > label:nth-child(3n),
			.hero-banner[data-group-type="3"] + script + .hero-controls .hero-links > label:nth-child(3n-1)
			{
				display: none;
			}			
		}

		@media (min-width: 1440px)
		{
			.hero-banner[data-group-type="2"],
			.hero-banner[data-group-type="3"]
			{
				
			}
		}