/* --- Container --- */
.container {
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 0 auto;
	gap: 3rem;
}

/* --- Header --- */
.container .header h4 {
	color: white;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 900;
	letter-spacing: 2px;
}

/* --- Body --- */
.container .body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.container .body h2 {
	color: var(--font-secondary);
	font-size: 1rem;
	font-weight: normal;
}
.container .body p {
	color: var(--font-secondary);
	margin: 0;
}

/* --- Section --- */
.container .body .section {
	display: flex;
	flex-direction: column;
}
.container .body .section h2 {
	color: white;
	font-weight: bold;
}
.container .body .section button {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 1rem;
	font-weight: bold;
	text-align: left;
	padding: 1rem;
	background-color: var(--bg-secondary);
	border-radius: 6px;
	cursor: pointer;
}
.container .body .section > div {
	display: flex;
	max-height: 0;
	overflow-y: hidden;
	flex-direction: column;
	padding: 0 1rem;
	font-size: 1rem;
	color: var(--font-secondary);
	gap: 1.6rem;
	opacity: 0;
	transform: translateY(16px);
	transition:
		max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: max-height, opacity, transform, padding;
}
.container .body .section > div.active {
	padding: 0.6rem 1rem;
	max-height: fit-content;
	opacity: 1;
	transform: translateY(0);
}
.container .body .section > div p {
	margin: 0;
}
.container .body .section > div > div,
.container .body .section > div > div ul,
.container .body .section > div > div li > div {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.container .body .section a {
	color: white;
	text-decoration: underline;
}
.container .body .section > div > div li {
	display: list-item;
}

/* --- Topic --- */
.body .topic {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.topic .header {
	color: white;
	font-weight: bold;
	flex: 1;
}
.topic .content {
	flex: 5;
	color: var(--font-secondary);
}
.topic .content ul {
	padding: 0;
}
.topic .content li {
	list-style: none;
}
.topic .content p {
	margin: 0;
}

/* --- Apply Button --- */
.body .apply {
	font-size: 1rem;
	margin: 1rem auto;
	width: fit-content;
	padding: 1rem;
	cursor: pointer;
	background-color: var(--bg-secondary);
	font-weight: bold;
	border-radius: 6px;
}

/* --- Tags --- */
.body .tags {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}
.body .tags span {
	color: white;
	background-color: var(--bg-secondary);
	padding: 0.4rem 0.6rem;
	font-weight: bold;
	border-radius: 6px;
}

/* --- Icon --- */
.section button i {
	place-items: center;
	display: flex;
}

/* --- Responsive --- */
@media (min-width: 568px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
	.body .topic {
		flex-direction: row;
	}
}
@media (min-width: 1200px) {
	.container {
		width: 80%;
	}
}
@media (min-width: 1600px) {
	.container {
		width: 60%;
	}
}