.homework {
	position: relative;
	margin: 2em auto;
	color: black;
	text-align: center;
}

.homework::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: calc(100% - 0.75em);
	background: url(../images/index/homework_back.png) no-repeat center center / 100% 100%;
}

.homework > * {
	position: relative;
}

.homework,
.homework h2,
.homework p {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.homework h2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	color: #c91a1a;
}
.homework h2 img {
	width: 9em;
	margin-bottom: 0.75em;
}

.homework p {
	margin: 0.5em 0 0;
}

.homework a {
	transition: 150ms;
}
.homework a:hover {
	opacity: 0.6;
}
.homework a img {
	border: 2px solid white;
	margin-top: 0.5em;
}


@media (max-width: 640px) {

	.homework,
	.homework img {
		font-size: 4vw;
	}

	.homework {
		width: 94%;
		padding-bottom: 3em;
	}

	.homework h2 {
		font-size: 120%;
	}
	.homework p {
		font-size: 90%;
		line-height: 1.4;
	}
	.homework a img {
		width: 16em;
	}
}


@media (min-width: 641px) {

	.homework,
	.homework img {
		font-size: 20px;
	}

	.homework {
		width: 28em;
		padding-bottom: 2.5em;
	}
	.homework h2 {
		font-size: 100%;
	}
	.homework p {
		font-size: 70%;
	}
	.homework p br {
		display: none;
	}
	.homework a img {
		width: 18em;
	}

}