section.link-block { 
}

section.link-block a.link { 
	display: block;
	text-decoration: none;

	background-size: 75% auto;
	background-position: right center;
	background-repeat: repeat-x;
}

section.link-block .content {
	display: grid;
	grid-template-columns: max-content auto;
	gap: 0;
}

section.link-block div.content div.title {
	font-size: 35px;
	font-weight: 300;
	color: var(--hlc-midnight-blue);

	padding: 40px 20px 40px calc(50vw - 590px);

	max-width: 66vw;

	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

section.link-block div.title p { 
	font: inherit;
	color: inherit;
}

section.link-block div.title > div.text > :last-child { 
	margin-bottom: 0;
}


section.link-block div.fade {
	
}

section.link-block div.content div.title div.text {width: 100%; }

section.link-block div.content div.title div.arrow {width: 26px; height: 26px; background-image: url("/_assets2026/icon-line-arrow-hlc-midnight-blue.png"); background-size: contain; background-position: center; background-repeat: no-repeat; transition: transform 0.2s;}

section.link-block a.link:hover div.content div.title div.arrow {transform: translateX(10px);}

/*** Themes ***/

/*
	dark-green
	light-green
	light-taupe
	multi-gradient
*/

section.link-block.tpp-theme-dark-green div.content div.title {
	background-color: var(--hlc-midnight-blue);
	color: #ffffff;
}

section.link-block.tpp-theme-dark-green div.content div.title div.arrow { 
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}

section.link-block.tpp-theme-dark-green div.content div.fade {
	background: linear-gradient(to right, rgba(var(--hlc-midnight-blue-rgb), 1) 0, rgba(var(--hlc-midnight-blue-rgb), 0.2) 100%);
}

section.link-block.tpp-theme-light-green div.content div.title { 
	background-color: var(--hl-light-green);
}

section.link-block.tpp-theme-light-green div.content div.fade { 
	background: linear-gradient(to right, rgba(var(--hl-light-green-rgb), 1) 0, rgba(var(--hl-light-green-rgb), 0.2) 100%);
}

section.link-block.tpp-theme-light-taupe div.content div.title {
	background-color: var(--hl-light-taupe);
}

section.link-block.tpp-theme-light-taupe div.content div.fade {
	background: linear-gradient(to right, rgba(var(--hl-light-taupe-rgb), 1) 0, rgba(var(--hl-light-taupe-rgb), 0.2) 100%);
}

section.link-block.tpp-theme-multi-gradient a.link {
	background-image: none!important;
}


@media (max-width: 1210px) {
	section.link-block div.content div.title { 
		padding-left: 10px;
	}
}

@media (max-width: 600px) {
	section.link-block div.content div.title { 
		max-width: 100vw;
	}

	section.link-block.tpp-theme-light-green div.content div.fade {
		background: var(--hl-light-green);
	}
}