GP Hooks problem with links

I am using GP Hooks to construct this fairly complex header area, and display it differently on mobile and desktop

https://www.rnli-911challenge.co.uk/

In the Before Header Content I have this

<div class="wrapper">
<!-- First Row -->
	<div class="grid-25 header-left">
		<a href="http://www.rnli-911challenge.co.uk"><img src="https://www.rnli-911challenge.co.uk/wp-content/uploads/2019/05/rnli-challenge-logo-2019-256x80png.png" alt="logo" width="256" height="80" /></a>
	</div>
	<div class="grid-50 header-center">
    		<p class="main-title" itemprop="headline">
			<a href="https://www.rnli-911challenge.co.uk/" rel="home">RNLI-911 Challenge 2021 - WALES</a>
		</p>
		<p class="site-description">
			To drive to all 51 RNLI Lifeboat stations (past & present) in <i>9.11</i> days!
		</p>
	</div>
	<div class="grid-25">
		<div class="deskContent">	
				<a href="https://www.justgiving.com/crowdfunding/rnli-911challenge" rel="home noopener" target="_blank"><img src="https://www.rnli-911challenge.co.uk/wp-content/uploads/2021/04/donate-here125.png" alt="donate button" width="125" height="125" /></a>
		</div>
		<div class="phoneContent">
			<a href="https://www.justgiving.com/crowdfunding/rnli-911challenge" rel="home noopener" target="_blank"><img src="https://www.rnli-911challenge.co.uk/wp-content/uploads/2021/04/donate-here75.png" alt="donate button" width="75" height="75" /></a>
		</div>
	</div>
</div>
<!-- Second Row -->
<div class="wrapper">
	<div class="grid-100 fluid-header-area">
	<!-- White bar divider -->
	</div>
	<div class="grid-25 header-left">
    	<aside id="socials-ignited-4" class="widget inner-padding widget_socials_ignited"><div class="ci-socials-ignited ci-socials-ignited-fa"><a href="https://www.instagram.com/rnli_911_challenge/" target="_blank" rel="nofollow noopener" title="Follow the RNLI-911 Challenge on instagram"><i class="fab fa-instagram"></i></a><a href="https://twitter.com/rnli_911" target="_blank" rel="nofollow noopener" title="Tweet the RNLI-911 Challenge your support"><i class="fab fa-twitter"></i></a></div></aside>	
	</div>
	<div class="grid-50 header-center">
   		<div class="grid-20">
   			<img src="https://www.rnli-911challenge.co.uk/wp-content/uploads/2021/05/rnli-flag-trans-125x75_text.png" alt="RNLI flag" width="125" height="75" />
    		</div>
    		<div class="grid-60">
    			[tminus t="23-08-2021 09:11"  style="carbonlite" omitweeks="true" before="COUNTDOWN TO START"/]
    		</div>
    		<div class="grid-20">
    			<img src="https://www.rnli-911challenge.co.uk/wp-content/uploads/2021/05/wales-flag-125x75-1.png" alt="WALES flag" width="125" height="75" />
   		 </div>
	</div>
	<div class="grid-25">
		<h2>Start: 9.11am 23-8-2021</h2>
   		<h2>Finish: 9.11am 1-9-2021</h2>
	</div>
</div>

The problem I have is that the hyperlinks do not work when viewing in desktop mode. I can't figure out why.

This is the custom CSS

h1 span {
padding: 0.2em;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);  /* 90% transparent */
box-decoration-break: clone;
}

h2 span {
padding: 0.2em;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);  /* 90% transparent */
box-decoration-break: clone;
}

.fluid-header-area {background: #fff;min-height: 8px;}

.header-center {
    text-align: center;
}
.header-right {
    text-align: right;
}
.wrapper {
  position: relative;
}
#infoi {
  position: absolute;
  top: 0;
  right: 0;
}
h2.ex1 {
    margin-right: 150px;
}

@media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}