/* home */
.home_intro {
	color: #232323;
	font-family: var(--heading-font);
	font-size: 40px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	/* 44px */
}

.home_panel {
	max-width: var(--max-width);
	margin: 0 auto;
	padding-inline: 16px;
}

.hp_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	min-height: 480px;
}


@container (min-width: 1312px) {
	.home_panel {
		padding-inline: 0;
	}
}

@container (min-width: 768px) {
	.hp_grid {
		gap: 24px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (min-width: 996px) {
	.hp_grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 32px;
	}

}

@container (min-width: 1200px) {
	.hp_grid {
		gap: 48px;
	}
}

.hp_bar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.hpb_link_wrapper {
	background-color: var(--dark);
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: 100%;

	a {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-width: 0;
		height:fit-content;
		color: white;
		background-color: var(--dark);
		text-decoration: none;
	}

	.hpbl_title {
		color: var(--white, #FFF);
		font-size: 14px;
		font-weight: 700;
		line-height: 140%;
		/* 19.6px */
		padding: 14px;
	}
}

.hpb_image {
	position: relative;
}

.hpb_summary {
	color: var(--white, #FFF);
	font-size:12px;
	font-weight: 400;
	line-height: 140%; /* 16.8px */
	padding: 14px;
}

.hpb_link:hover {
	.mc_tint {
		opacity: 0;
		transition: var(--transition);
	}

}

.hpb_link_wrapper.hpb-expanding {
	animation: hpb-wrapper-bounce 0.4s ease-out forwards;
}

.hpb_link_wrapper.hpb-collapsing {
	animation: hpb-wrapper-bounce-out 0.2s ease-out forwards;
}

@keyframes hpb-wrapper-bounce {
	0% {
		flex-grow: 0;
	}

	60% {
		flex-grow: 1;
	}

	78% {
		flex-grow: 0.82;
	}

	100% {
		flex-grow: 1;
	}
}

@keyframes hpb-wrapper-bounce-out {
	0% {
		flex-grow: 1;
	}

	22% {
		flex-grow: 0.82;
	}

	40% {
		flex-grow: 1;
	}

	100% {
		flex-grow: 0;
	}
}

.audio_button_container{
	padding-top:24px;
	display:none;
}

@container (min-width: 768px) {
	.audio_button_container{
		display:flex;
		justify-content: start;
	}
}

.audio_button{
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	background-color: transparent;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;

	.audio_button_icon{
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.audio_button_text{
		display: flex;
		align-items: center;
	}
}

.audio_button:hover{
	.audio_button_icon{
		color: var(--accent);
	}
}

#app.app_audio_on{
	.audio_button_icon{
		color: var(--accent);
	}
}