#centredetails{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 200px);
	grid-template-areas:
	"header header"
	"main main2"
	"main3 main4";
	grid-gap: 10px;
}

#competition {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 200px);
	grid-template-areas:
	"main main2"
	"main3 main4";
	grid-gap: 10px;
}

#joincontact {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 200px;
	grid-template-areas:
	"main main2";
	grid-gap: 10px;
}

@media screen and (min-width: 800px) {
	#centredetails {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(2, 200px);
		grid-template-areas:
		"header header main main main2"
		"header header main3 main4 main4";
		grid-gap: 0.6em;
		margin-bottom: 2rem;
	}

	#competition {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(2, 200px);
		grid-template-areas:
		"main main header header header"
		"main2 main3 header header header";
		grid-gap: 0.6em;
		margin-bottom: 2rem;
	}

	#joincontact {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(1, 200px);
		grid-template-areas:
		"main main main main2 main2";
		grid-gap: 0.6em;
	}
}

/* Tile links */

main a {
	color: white;
	text-decoration: none;
}

main a:focus {
	outline: red 3px dashed;
}

main a h3 {
	padding: 0.4rem;
	background-color: #3746C8;
	width: fit-content;
	width: -moz-fit-content;
}

@supports not (grid-area: auto) {
	main a h3 {
		padding: 0.5rem;
	    border-left: #3746C8 12px solid;
	}

	main a h3:hover, main a:focus h3 {
	    border-left: rgb(242,201,76) 12px solid;
	}

	video {
		display: none;
	}
}

main .link {
	justify-self: stretch;
	align-self: stretch;
}

@supports (grid-area: auto) {
	.yellowinnerlink, .blueinnerlink {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

.yellowinnerlink:hover {
	background-color: rgba(255,218,0,0.2);
}

.blueinnerlink:hover {
	background-color: rgba(20,20,255,0.2);
}
}

/* Focus-visible polyfill */
.js-focus-visible :focus:not(.focus-visible) {
  outline: 0;
}

/* Header tile image */

.header {
	grid-area: header;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

/* Video header */

.herovid {
	grid-area: header;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.videobg {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

@media screen and (max-width: 800px) {
	video {
		display: none;
	}
}

/* Appplies to all tiles */

.icon {
	background-color: white;
}

/* Item A1 */

.item-a1, .link-a1, .icon-a1 {
	grid-area: main;
}

.item {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.icon-a1 {
	background: rgba(30,39,162,0.8) url('../images/noun_820371_cc.png') no-repeat center;
	background-size: contain;
}

/* Item A2 */

.item-a2, .link-a2, .icon-a2 {
	grid-area: main2;
}

.icon-a2 {
	background: rgba(242,201,76,0.8) url('../images/noun_1067114_cc.png') no-repeat center;
	background-size: contain;
}

/* Item A3 */

.item-a3, .link-a3, .icon-a3 {
	grid-area: main3;
}

.icon-a3 {
	background: rgba(242,201,76,0.8) url('../images/noun_801100_cc.png') no-repeat center;
	background-size: contain;
}

/* Item A4 */

.item-a4, .link-a4, .icon-a4 {
	grid-area: main4;
}

.icon-a4 {
	background: rgba(30,39,162,0.8) url('../images/noun_1124563_cc.png') no-repeat center;
	background-size: contain;
}

/* Item B1 */

.item-b1, .link-b1, .icon-b1 {
	grid-area: main;
}

.icon-b1 {
	background: rgba(30,39,162,0.8) url('../images/noun_1059794_cc.png') no-repeat center;
	background-size: contain;
}

/* Item B2 */

.item-b2, .link-b2, .icon-b2 {
	grid-area: main2;
}

.icon-b2 {
	background: rgba(242,201,76,0.8) url('../images/noun_1041927_cc.png') no-repeat center;
	background-size: contain;
}

/* Item C1 */

.item-c1, .link-c1, .icon-c1 {
	grid-area: main;
}

.icon-c1 {
	background: rgba(242,201,76,0.8) url('../images/noun_1070918_cc.png') no-repeat center;
	background-size: contain;
}

/* Item C2 */

.item-c2, .link-c2, .icon-c2 {
	grid-area: main2;
}

.icon-c2 {
	background: rgba(30,39,162,0.8) url('../images/noun_571142_cc.png') no-repeat center;
	background-size: contain;
}

/* Item C3 */

.item-c3, .link-c3, .icon-c3 {
	grid-area: main3;
}

.icon-c3 {
	background: rgba(30,39,162,0.8) url('../images/noun_1219367_cc.png') no-repeat center;
	background-size: contain;
}