@charset "UTF-8";
.p-home {
	display: grid;
	grid-template-rows: 5rem calc((100vw - 3rem) / 2) auto;
	grid-template-columns: repeat(8, 1fr);
	gap: .75rem;
	background: var(--purple-50);
}
.p-card {
	position: relative;
	aspect-ratio: 1/1;
	padding: 1rem;
	background: var(--white);
	border-radius: 12px;
	box-shadow: var(--shadow-elevation-medium);
}
.p-card:first-child {
	grid-area: 1 / 1 / 2 / 9;
}
.p-card:nth-child(2) {
	grid-area: 2 / 1 / 3 / 5;
}
.p-card:nth-child(3) {
	grid-area: 2 / 5 / 3 / 9;
}
.p-card:nth-child(4) {
	grid-area: 3 / 1 / 4 / 3;
}
.p-card:nth-child(5) {
	grid-area: 3 / 3 / 4 / 5;
}
.p-card:nth-child(6) {
	grid-area: 3 / 5 / 4 / 7;
}
.p-card:nth-child(7) {
	grid-area: 3 / 7 / 4 / 9;
}
.p-card--user {
	display: flex;
	column-gap: .5rem;
	align-items: center;
	aspect-ratio: unset;
}
.p-card__icon {
	width: 3rem;
	padding: .5rem;
	border-radius: 8px;
	fill: transparent;
	stroke: var(--purple-500);
}
.p-card__icon--bg {
	background: var(--purple-50);
}
.p-card__arrow {
	width: 1rem;
	margin-left: auto;
	fill: transparent;
	stroke: var(--purple-500);
}
.p-card__progress {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	font-weight: bold;
}
.p-card__progress::after {
	font-size: .5em;
	content: "%";
}
.p-card__ttl {
	margin-top: .5rem 1rem;
	font-size: 1.25rem;
	font-weight: bold;
}
.p-card__footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	padding: .5rem;
	margin: auto;
	border-top: 1px solid var(--purple-50);
}