@media all
		{
			.article h1,
			.article h2
			{			
				display: inline;
				font-size: var(--font-size-title);	
				color: var(--colour-main-text);								
			}		
			.article h2
			{		
				font-size: var(--font-size-important);				
			}			
			.article
			{								
				justify-items: left;				
			}			
			.article > .description
			{
				text-align: left;				
			}
			.article.aligncentre
			{				
				justify-items: center;
			}			
			.article.aligncentre > .description
			{
				text-align: center;
			}			
			.article.alignright
			{				
				justify-items: right;
			}			
			.article.alignright > .description
			{
				text-align: right;
			}
			.article > .description > p img
			{
				max-width: 100%;				
			}
			.article > .description > p > a
			{
				font-weight: var(--font-weight-semi-bold);
				text-decoration: underline;
				text-underline-offset: 6px;
			}
			.article .description table
			{
				border-style: hidden; 
				box-shadow: 0 0 0 1px var(--colour-stroke);
				border-radius: var(--radius-small);
				width: 100%;		
				overflow: hidden;
				margin: 16px 0px;
			}
			.article .description table tr
			{
				height: 38px;
			}
			.article .description table thead
			{
				border-bottom: 1px solid var(--colour-stroke);
			}
			.article .description table thead th
			{
				padding: calc(.5 * var(--grid-gap-standard-vertical)) var(--grid-gap-standard-horizontal);
				font-weight: var(--font-weight-semi-bold);
				color: var(--colour-main-text);
			}
			.article .description table tbody tr td
			{
				color: var(--colour-secondary-text);
				padding: calc(.5 * var(--grid-gap-standard-vertical)) var(--grid-gap-standard-horizontal);
			}
			.article .description table tbody tr td strong
			{
				font-weight: normal;
				color: var(--colour-main-text);
			}
			.article .description table tbody tr:nth-child(odd)
			{
				background: var(--colour-base);
			}	
			.article .description h1, 
			.article .description h2			
			{
				margin: 16px 0px;
				display: inline-block;				
			}
		}
		@media print
		{	
			.article
			{			
				display: flex;
				flex-direction: column;
				page-break-inside: avoid;
				margin: .5cm 0cm;
				padding: 1cm;
			}		
			.article .image
			{
				display: flex;
				align-items: center;				
				grid-gap: 1em;
				flex-wrap: wrap;
				order: 2;
			}
			.article .image img
			{
		        width: 5cm;
				height: 5cm;
				object-fit: cover;
				border-radius: 50%;
				border: 1mm solid var(--colour-base);
				outline: 1mm solid var(--colour-main);
			}
			.article header,
			.article .description
			{
			    margin: 0cm .5cm;
			}
			.article .links
			{
				display: none;	
			}
		}
		@media screen
		{
			.article-list
			{
				margin-top: var(--margin-section-gap);
				display: grid;
				grid-gap: var(--margin-section-gap);
			}
			
			main section:first-of-type .article-list
			{
				margin-top: var(--margin-section-very-top);
			}
			
			.article
			{
				display: grid;
				padding: 0px var(--padding-main-horizontal);				
				grid-gap: var(--grid-gap-standard-horizontal) var(--grid-gap-extrawide-vertical);								
				align-items: center;				
				align-content: center;				
			}		
			.article header
			{
				grid-area: header;
				display: flow;					
			}			
			.article .description
			{
				grid-area: description;
				width: 100%;				
			}
			
			.article .image
			{
				grid-area: image;
				justify-self: normal;	
				width: 100%;
				max-height: 420px;				
				overflow: hidden;
				scroll-snap-type: x mandatory; 
				scroll-behavior: smooth;			
				display: grid;
				grid-auto-flow: column;
				grid-auto-columns: 100%;
				justify-items: center;
				grid-gap: var(--padding-main-horizontal);
				scroll-margin-top: 40px;	
				border-radius: var(--radius-tiny);			
				align-content: center;
			}
			.article .image > iframe
			{
			    width: 100%;
				height: 420px;
			}	
			.article .image > a
			{
				width: 100%;
				height: 100%;
			}			
			.article .image.autoscroll
			{
				overflow: hidden;
			}
			.article .image	> a > img,
			.article .image	> img
			{			
				border-radius: var(--radius-tiny);			
				width: 100%;			
				/*object-fit: scale-down;*/	
				scroll-snap-align: center;					
			}
			
			.article .image .media-link:before
			{
				content: '';
				display: block;
				position: absolute;
				width: 100px;
				height: 70px;
				top: calc(50% - 35px);
				left: calc(50% - 50px);
				pointer-events: none;
				opacity: .6;
				border-radius: 30px / 20px;				
				background-color: #F00;  
				z-index: 1;
			}	
			.article .image .media-link:after
			{
				content: '';
				display: block;
				position: absolute;
				width: 100px;
				height: 70px;
				top: calc(50% - 35px);
				left: calc(50% - 50px);
				pointer-events: none;
				opacity: .6;
				mask: url(/index/play.svg);
				mask-position: 40px 12px;
				mask-size: 50px 50px;
				mask-repeat: no-repeat;
				background-color: #FFF;    
				z-index: 1;
			}			
			
			.article .image:hover .media-link:after
			{
				opacity: 1;
			}
			
			.article .image:hover .media-link:before
			{
				opacity: .9;
				box-shadow: 0px 0px 12px 0px #FFF;
			}
			
			.article .image input[type="radio"],
			.article .image .media-link + .content
			{
				display: none;
			}
			.article .image .media-link + .content
			{
				position: fixed;
				opacity: 0;
				pointer-events: none;		
				display: grid;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;    		
				background: #FFF4;
				backdrop-filter: blur(3px);
				align-content: center;
				justify-content: center;	
				z-index: 2;	
			}
			.article .image .media-link:has(:checked) + .content
			{
				opacity: 1;
				pointer-events: all;
			}
			.article .image .media-link + .content > span
			{
				width: 62vw;
				aspect-ratio: 15 / 9;			
			}		
			.article .image .media-link + .content > span iframe,
			.article .image .media-link + .content > span .frame
			{
				width: 100%;
				height: 100%;
				background-color: var(--colour-base);
				border: 1px solid var(--colour-stroke);			
			}
			.article .links
			{
				grid-area: links;
				display: flex;
				grid-gap: var(--grid-gap-button);
				flex-wrap: wrap;
			}
			
			.article .links > a
			{
				display: flex;
				grid-gap: 8px;
			}
			.article .links > a > picture img
			{				
				max-height: 30px; 
				object-fit: contain;
			}
			
			@media (min-width: 801px)
			{
				.article .image
				{			
					justify-self: auto;			
				}		
			}
		}
				@media screen
		{
			.article-list.style1 > .article
			{			
				align-items: start;	
				grid-template-areas: 					
					"image"
					"header"
					"description"
					"links"; 								
				grid-template-rows: auto 1fr auto auto;				
			}			
			.article-list.style1 > .article.noimage
			{
				grid-template-areas: 
					"header"
					"description"
					"links";
				grid-template-columns: 1fr;						
				grid-template-rows: auto 1fr auto;
			}
			
			.article-list.style1 > .article.nolinks
			{
				grid-template-areas: 					
					"image"
					"header"
					"description"; 				
					grid-template-rows: auto 1fr auto;
			}
			.article-list.style1 > .article.noimage.nolinks
			{
				grid-template-areas: 										
					"header"
					"description"; 		
				grid-template-rows: auto 1fr;					
			}
			
			
			@media (min-width: 1024px)
			{
				.article-list.style1 > .article:not(.noimage):nth-child(odd)
				{
					grid-template-areas: 
						"image ."
						"image header"
						"image description"
						"image links"
						"image .";
					grid-template-columns: 50% 50%;			
					grid-template-rows: 1fr repeat(3, auto) 1fr;
				}
				.article-list.style1 > .article:not(.noimage):nth-child(even)
				{
					grid-template-areas: 
						". image"
						"header image"
						"description image"
						"links image"
						". image";
					grid-template-columns: 50% 50%;	
					grid-template-rows: 1fr repeat(3, auto) 1fr;					
				}
				.article-list.style1 > .article.autoadjust:not(.noimage):nth-child(even),
				.article-list.style1 > .article.autoadjust:not(.noimage):nth-child(odd)
				{
					grid-template-columns: auto auto;		
				}
			}	
		}			
			
		.article-list.style2 .article header
		{
			padding-bottom: 16px;
		}		
		
		@media screen and (min-width: 1024px)
		{
			main section:has(.article-list.style2)
			{			       
				grid-column: 2;
				width: 100%;
				padding-right: var(--grid-gap-wide-horizontal);
			}			
		}	
		.article-list.style2
		{
			margin: var(--margin-details-gap) var(--grid-gap-standard-horizontal);
			padding: 0px 8px;			
		}		
		.article-list.style2 > .article
		{				
			padding: 0px;					
			grid-gap: 0px;
			align-items: start;	
			grid-template-areas: 
				"image"
				"header"
				"description"
				"links"; 						
			justify-items: start;
		}
		
		@media screen and (min-width: 1024px)
		{
			.article-list.style2
			{
				margin: var(--margin-details-gap) 0px;			
			}		
		}
				@media screen and (min-width: 1024px)
		{
			main section:has(.article-list.style3)
			{			       
				grid-column: 3;
				width: 100%;
			}
		}
				
		@media all
		{						
			.article-list.style4 > input[type="radio"],
			.article-list.style4 > input[type="radio"] + .article,
			.article-list.style4 + nav
			{
				display: none;
			}
			.article-list.style4 > input[type="radio"]:checked + .article
			{
				display: grid;
				animation-iteration-count: 1;
				animation-duration: 1s;
				animation-direction: forward;
				animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
				animation-fill-mode: forwards;				
				animation-name: fade-in;
			}				
		}		
		@media screen
		{
			.article-list.style4
			{				
				grid-gap: var(--grid-gap-standard);
			}
			.article-list.style4 > .article
			{			
				align-items: start;	
				grid-template-areas: 
					"image"
					"header"
					"description"
					"links"; 									
			}			
			.article-list.style4 > .article.noimage
			{
				grid-template-areas: 
					"header"
					"description"
					"links";
				grid-template-columns: 1fr;			
			}
			@media (min-width: 1024px)
			{
				.article-list.style4 > .article:not(.noimage):nth-child(odd)
				{
					grid-template-areas:
						"image ."					
						"image header"
						"image description"
						"image links"
						"image .";
					grid-template-columns: 50% 50%;				
					grid-template-rows: 1fr repeat(3, auto) 1fr;
				}
				.article-list.style4 > .article:not(.noimage):nth-child(even)
				{
					grid-template-areas: 
						"image ."
						"image header"
						"image description"
						"image links"
						"image .";
					grid-template-columns: 50% 50%;
					grid-template-rows: 1fr repeat(3, auto) 1fr;				
				}
				.article-list.style4 > .article.autoadjust:not(.noimage):nth-child(odd),
				.article-list.style4 > .article.autoadjust:not(.noimage):nth-child(even)				
				{
					grid-template-columns: auto auto;		
				}
			}	
			.article-list.style4 > nav
			{
				display: flex;
				justify-content: center;			
			}	
			.article-list.style4 > nav > label
			{
				display: block;
				background: var(--colour-stroke);
				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;		
			}
			.article-list.style4 > nav > label:hover,
			.article-list.style4 > nav > label.selected
			{
				background: var(--colour-main);
			}
			.article-list.style4 > nav > label.selected
			{
				mask-image: url('/index/spot-selected.svg');
			}			
		}				
				@media screen
		{
			.article-list.style5 > .article
			{			
				align-items: start;	
				grid-template-areas: 					
					"image"
					"header"
					"description"
					"links"; 					
			}			
			.article-list.style5 > .article.noimage
			{
				grid-template-areas: 
					"header"
					"description"
					"links";
				grid-template-columns: 1fr;			
			}
			@media (min-width: 1024px)
			{
				.article-list.style5 > .article:not(.noimage)
				{
					grid-template-areas: 
						"image ."
						"image header"
						"image description"
						"image links"
						"image .";
					grid-template-columns: 50% 50%;			
					grid-template-rows: 1fr repeat(3, auto) 1fr;
				}	
				.article-list.style5 > .article.autoadjust:not(.noimage)				
				{
					grid-template-columns: auto auto;		
				}				
			}	
		}			
				@media screen
		{
			.article-list.style6 > .article
			{			
				align-items: start;	
				grid-template-areas: 					
					"image"
					"header"
					"description"
					"links"; 											
			}			
			.article-list.style6 > .article.noimage
			{
				grid-template-areas: 
					"header"
					"description"
					"links";
				grid-template-columns: 1fr;			
			}
			@media (min-width: 1024px)
			{
				.article-list.style6 > .article:not(.noimage)
				{
					grid-template-areas: 
						". image"
						"header image"
						"description image"
						"links image"
						". image";
					grid-template-columns: 50% 50%;
					grid-template-rows: 1fr repeat(3, auto) 1fr;
				}				
				
				.article-list.style6 > .article.autoadjust:not(.noimage)	
				{
					grid-template-columns: auto auto;		
				}
			}	
		}