div.contact-details
	{
		display: grid;	
		grid-gap: var(--grid-gap-standard-horizontal) var(--grid-gap-extrawide-vertical);		
	}
	
	.contact-details h2	
	{
		font-size: var(--font-size-title);
		color: var(--colour-main-text);		
		padding: 16px var(--padding-main-horizontal);		
	}

	.contact-details > div	
	{						
		width: 100%;
	}

	.opening-times h2 + div > div
	{
		scroll-snap-align: center;
	}	
	
	div.contact-details h3
	{				
		font-size: var(--font-size-cozy-title);
		font-weight: var(--font-weight-semi-bold);	
		padding: var(--margin-details-gap) 0px;		
	}
	
	div.contact-details tr
	{
		display: grid;                
		grid-auto-flow: row;
		padding: 16px;
	}
	div.contact-details tr:nth-child(odd)
	{
		background: var(--colour-base);
	}	
	div.contact-details td:first-of-type 
	{
		color: var(--colour-secondary-text);
		white-space: nowrap;		
	}	
	div.contact-details td:last-of-type a
	{
		color: var(--colour-main-text);
		font-weight: var(--font-weight-semi-bold);		
	}

	div.contact-details table
	{
		border-style: hidden; 
        box-shadow: 0 0 0 1px var(--colour-stroke);
		border-radius: var(--radius-small);
		width: 100%;		
		overflow: hidden;
		margin-bottom: 32px;
	}
	div.contact-details table + hr
	{
		margin-bottom: 32px;
	}
	div.contact-details table thead
	{
		border-bottom: 1px solid var(--colour-stroke);
	}
	div.contact-details 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);
	}	
	div.contact-details table tbody tr td
	{
		color: var(--colour-secondary-text);
		padding: calc(.5 * var(--grid-gap-standard-vertical)) var(--grid-gap-standard-horizontal);
	}
	div.contact-details table tbody tr td strong
	{
		font-weight: normal;
		color: var(--colour-main-text);
	}

	
	@media screen and (min-width: 800px)
	{
		div.contact-details tr
		{			
			grid-auto-flow: column;
			justify-content: space-between;								
			padding: 16px;			
		}
	}	
	@media screen and (min-width: 1024px)
	{			
		div.contact-details tr
		{
			padding: 8px;	
		}
	}
	@media screen and (min-width: 1100px)
	{
		
	}