@import "../modules/functions";

.page-title,
.help-page,
.more-help {
	margin: 0 auto;
	max-width: 768px;
	width: 90%;
}

.page-title {
	> .title {
		margin-bottom: 24px;
	}
}

.help-page {
	border-bottom: 2px solid var(--mint);

	// Make sure video is in 16:9 format and responsive
	> #video {
		margin-bottom: 1rem;
		padding-bottom: 56.25%;
		position: relative;
		width: 100%;

		> iframe {
			height: 100%;
			position: absolute;
			width: 100%;
		}

		@media only screen and (min-width: 768px) {
			margin-bottom: 4.5rem;
		}
	}
}

.help-cards {
	width: 100%;

	> .card {
		background-color: var(--mint);
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 24px;
		padding: 16px;
		width: 100%;

		> .thumbnail {
			height: 100%;
			margin-bottom: 1rem;
			object-fit: cover;
			width: 100%;

			@media only screen and (min-width: 768px) {
				margin-bottom: 0;
				width: 40%;
			}
		}

		> .information {
			letter-spacing: 2px;
			width: 100%;

			> .title {
				font-weight: 700;
				margin-bottom: .5em;
			}

			@media only screen and (min-width: 768px) {
				margin-left: 1rem;
				width: calc(60% - 1rem);
			}
		}
	}
}

.more-help {
	margin-top: 72px;
	text-align: center;

	> h4 {
		font-size: 18px;
		letter-spacing: 2px;
		width: 100%;

		> a {
			display: inline-block;
			position: relative;

			&::after {
				background-color: var(--yellow);
				bottom: 0;
				content: "";
				display: block;
				height: 16px;
				left: -10%;
				position: absolute;
				transition: height .5s ease;
				width: 120%;
				z-index: -1;
			}

			&:hover {
				&::after {
					height: 100%;
				}
			}
		}
	}
}