@use "../../00-base/mixin/core.mixin";
@use "../../00-base/mixin/elevation.mixin";

.hoo-splashcard{
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	// width: 100%;
	// max-width: calc(100% / 3);
	max-width: 33rem;
	width: auto;
	padding: 3rem 1.25rem;
}
.hoo-splashcard-header{
	display: flex;

	box-sizing: border-box;
	padding: 1rem;
}
.hoo-splashcard-img{
	max-width: 320px;
	margin: auto;
	margin-bottom: 2rem;
}
.hoo-splashcard-title{
	font-size: core.px2rem(18px);

	display: block;

	max-width: 320px;
	margin: auto;
	margin-bottom: .5rem;
	text-align: center;
}
.hoo-splashcard-desc{
	font-size: core.px2rem(14px);
	line-height: core.px2rem(20px);

	margin-top: 0;
	margin-bottom: 0;

	text-align: center;
}
.hoo-splashcard-footer{
	display: flex;
	flex-direction: column;
	align-self: center;

	width: core.px2rem(290px);
	margin: 2rem auto;

	gap: .5rem;
	& > *{
		@include elevation.elevation(4);
	}
}