.hb-option {
	--colors-default-background: #ffffff;
	--colors-emphasizing: #00a651;
	--colors-tinge: #f0f3f2;
	--line-height: 1.3;
}


.hb-option {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden; /* prevent child image overflow given border radius */
	background-color: var(--colors-tinge);
	border-radius: 2em;
	text-decoration: none;
}

.hb-option:hover {
	color: inherit !important;
}

.hb-option__text {
	padding: calc(var(--line-height) * 1rem);
}

@media (max-width: 40em) {
	.hb-option__text {
		padding: calc(var(--line-height) * 1.5rem) calc(var(--line-height) * 2rem);
	}
}

.hb-option__heading {
	font-weight: bold;
}

@media (min-width: 60.001em) {
	.hb-option__heading {
		text-align: center;
	}
}

.hb-option__image {
	--hb-option-image: url(https://brontosaurus.cz/wp-content/themes/brontosaurus-theme/frontend/dist/images/logo-hb-brontosaurus.svg); /* default */
	background-image: var(--hb-option-image);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 0 0 2em 2em;
	display: flex;
	flex-direction: column;
	height: 13em;
	justify-content: flex-end;
	overflow: hidden;
	position: relative;
}





.hb-btn--secondary-wrapper {
	display: block;
	overflow: hidden;
	position: relative;
}
.hb-btn.hb-btn--secondary {
	display: block;
	border-radius: 2em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease-in-out;
	padding-top: calc((var(--line-height) * 0.5rem) + 0.25em);
	padding-bottom: calc(var(--line-height) * 0.5rem);
	position: absolute;
	bottom: calc(var(--line-height) * 1rem);
	max-width: 8em;
	z-index: 0;
	hyphens: auto;
}
.hb-btn--secondary-wrapper:hover .hb-btn.hb-btn--secondary {
	color: var(--colors-default-background);
}
@media (max-width: 39em) {
	.hb-btn.hb-btn--secondary {
		text-align: right;
		right: calc(var(--line-height) * 1rem);
	}
}
@media (min-width: 39.001em) {
	.hb-btn.hb-btn--secondary {
		max-width: 20em;
		left: 50%; transform: translateX(-50%); /* center absolutely positioned element */
		white-space: nowrap; /* avoid line breaks (when `left: 50%` hits right border of an element, it causes line break) */
		padding: calc(var(--line-height) * 0.5rem) calc(var(--line-height) * 1rem) calc((var(--line-height) * 0.5rem) - 0.3em);
		border-radius: 2em;
	}
}

.hb-btn.hb-btn--secondary::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 22px;
	margin-bottom: -0.1em;
	margin-right: 10px;
	background-image: url("https://brontosaurus.cz/wp-content/themes/brontosaurus-theme/frontend/dist/images/icon-smallPaw.svg");
	background-position: left top;
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.hb-btn.hb-btn--secondary::after {
	content: "";
	background-color: rgba(255, 255, 255, 0.8); /* should be var(--colors-default-background) with 80% opacity, but it's not possible in plain css yet; following hack is not applicable as it collides with transition – https://css-tricks.com/mixing-colors-in-pure-css/#mixing-colors-with-animation */
	width: 13em;
	height: 13em;
	position: absolute;
	border-radius: 50%;
	top: -3em;
	z-index: -1;
	transition: background-color 200ms ease-in-out;
}
.hb-btn--secondary-wrapper:hover .hb-btn.hb-btn--secondary::after {
	background-color: var(--colors-emphasizing);
}
@media (max-width: 39em) {
	.hb-btn.hb-btn--secondary::after {
		right: -4em;
	}
}
@media (min-width: 39.001em) {
	.hb-btn.hb-btn--secondary::after {
		background-color: rgba(255, 255, 255, 0.9); /* should be var(--colors-default-background) with 90% opacity, but it's not possible in plain css yet; following hack is not applicable as it collides with transition – https://css-tricks.com/mixing-colors-in-pure-css/#mixing-colors-with-animation */
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 2em;
	}
}
.hb-btn.hb-btn--secondary-wrapper:hover .hb-btn.hb-btn--secondary {
	color: var(--colors-default-background);
}
.hb-btn.hb-btn--secondary-wrapper::after {
	background-color: var(--colors-emphasizing);
}