/* Base element resets and the .container-custom / blockHeader layout primitives, ported from the static layout */

body, html {
	margin: 0;
	padding: 0;
	background: var(--bgColor1);
	font-family: "Onest", sans-serif;
	font-weight: 300;
	letter-spacing: 0.25px;
	color: var(--fontColor1);
}

img { display: block; max-width: 100%; }
a { display: block; }


/* Container & Header Block */
.container-custom { position: relative; display: flex; flex-direction: column; z-index: 10; width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.blockHeader { display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; text-align: center; gap: 24px; margin: 0 0 56px 0; }
.blockHeader-sub { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.75px; }
.blockHeader-h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; }
.blockHeader-btn { display: flex; flex-wrap: no-wrap; gap: 12px; align-items: center; font-size: 16px; color: var(--fontColor1); font-weight: 700; text-decoration: none; }
.blockHeader-btn img { width: 32px; height: auto; transition: transform 0.3s ease; }
.blockHeader-btn:hover img { transform: translateX(12px); }

@media (min-width: 768px) { 
	.container-custom { padding: 0 4%; }
	.blockHeader { display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; text-align: center; gap: 24px; margin: 0 0 56px 0; }
	.blockHeader-sub { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.75px; }
	.blockHeader-h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; }
	.blockHeader-btn { display: flex; flex-wrap: no-wrap; gap: 12px; align-items: center; font-size: 16px; color: var(--fontColor1); font-weight: 700; text-decoration: none; }
	.blockHeader-btn img { width: 32px; height: auto; transition: transform 0.3s ease; }
	.blockHeader-btn:hover img { transform: translateX(12px); }
}

@media (min-width: 1200px) { 
	.container-custom { position: relative; max-width: 1500px; padding: 0 7%; }
	.blockHeader { display: grid; grid-template-columns: 2fr 1fr; align-items: center; justify-items: start; gap: 24px; margin: 0 0 56px 0; text-align: left; }
	.blockHeader-sub { grid-column: 1 / -1; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.75px; }
	.blockHeader-h1 { grid-column: 1; font-size: 38px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; }
	.blockHeader-btn { grid-column: 2; justify-self: end; display: flex; flex-wrap: no-wrap; gap: 12px; align-items: center; font-size: 17px; color: var(--fontColor1); font-weight: 700; text-decoration: none; }
	.blockHeader-btn img { width: 38px; height: auto; transition: transform 0.3s ease; }
	.blockHeader-btn:hover img { transform: translateX(12px); }
}
/* Container & Header Block */