@media all
		{
			.events
			{
				padding: var(--padding-main);
				align-items: start; 
				margin-top: var(--margin-section-gap);				
			}
			.events.standard-grid
			{
				grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
			}
			
			.events h1
			{
				grid-column: 1 / -1;
				margin-bottom: 8px;
			}
			.events .box 
			{
				display:grid;
				grid-template-areas: 
					"image"
					"title"
					"date"
					"location"					
					"link";
				grid-gap: 8px;
			}
			.events .box > .image
			{ 
				grid-area: image; 
			}
			.events .box > .image img
			{
				border-radius: var(--radius-tiny);
				width: 100%;
			}
			
			.events .box > .date 
			{ 
				grid-area: date; 
				font-size: var(--font-size-shows-info);
				font-weight: var(--font-weight-semi-bold);
				color: var(--colour-secondary-text);
				padding-left: 17px;
				line-height: 1em;
			}
			.events .box > .date:before
			{
				content: "";
				width: 12px;
				height: 12px;
				display: block;
				position: absolute;
				top: 0px;
				left: 0px;
				background-color: var(--colour-main);
				mask-image: url(/index/calendar.svg);
				mask-size: contain;
				mask-repeat: no-repeat;
				mask-position: left center;								
			}
			.events .box > .location 
			{ 
				grid-area: location; 				
				font-size: var(--font-size-shows-info);
				font-weight: var(--font-weight-semi-bold);
				color: var(--colour-secondary-text);				
				padding-left: 14px;
				line-height: 1em;				
			}
			.events .box > .location:before
			{
				content: "";
				width: 9px;
				height: 12px;
				display: block;
				position: absolute;
				top: 0px;
				left: 0px;
				background-color: var(--colour-main);
				mask-image: url(/index/pin.svg);
				mask-size: contain;
				mask-repeat: no-repeat;
				mask-position: left center;					
			}
			.events .box > h1 
			{
				font-size: var(--font-size-subject);
				font-weight: var(--font-weight-bold);
				padding: 0px;
				justify-self: start;
				line-height: var(--font-size-subject);
				align-self: baseline;				
				grid-area: title; 
			}
			.events .box > a.link 
			{ 
				grid-area: link; 
				justify-self: baseline;
				width: 100%;
			}			
		}