﻿
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(--hl-dark-green);

	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.arrow { 
	width: 26px;
	height: 26px;
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.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(--hl-dark-green);
	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(--hl-dark-green-rgb), 1) 0, rgba(var(--hl-dark-green-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);
	}
}