/**
 * Reasons to visit cards (move to theme before launch)
 */

div:not(.footer__links) a.reasons-link {
	color: var(--global-body-text-colour);
	margin-top: 1rem;
	display: inline-block;
	text-decoration: underline;
	cursor: pointer;
}

div:not(.footer__links) a.reasons-link:hover,
div:not(.footer__links) a.reasons-link:focus {
	color: var(--global-body-text-colour);
	text-decoration: none;
}

div:not(.footer__links) a.reasons-link + a.reasons-link {
	margin-inline-start: 1em;
}

.reasons-to-visit {
	padding-left: 3vw;
	padding-right: 3vw;
	padding-bottom: 3rem;
}

.reasons-to-visit > .page-title {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.reason-cards {
	display: flex;
	flex-flow: row wrap;
	gap: 1em;
}

a.reason-card {
	background: var(--nav-bg-colour);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 0 0 100%;
	transition: all .25s ease-out;
	border: 2px solid var(--nav-bg-colour);
}

a.reason-card:hover,
a.reason-card:focus {
	text-decoration: none;
	background: var(--nav-link-colour-2);
}

a.reason-card:hover .reason-card-text,
a.reason-card:focus .reason-card-text {
	color: var(--nav-bg-colour);
}

@media (width >= 600px) {
	a.reason-card {
		flex-direction: row;
	}
}

@media (width >= 1100px) {
	a.reason-card {
		padding: 1rem;
		display: flex;
		gap: 1rem;
		flex: 1 0 45%;
	}
}

.reason-card-image {
	margin-bottom: 0;
	flex: 0 0 40%;
}

.reason-card-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.reason-card-text {
	color: var(--nav-link-colour-2);
}
.reason-card-text h2 {
	font-size: var(--h1-size);
	color: inherit;
}

.reason-card-text p {
	font-size: var(--h2-size);
	color: inherit;
}

/**
 * Reasons to visit page
 */

.reason-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 4rem;
	margin-bottom: 1rem;
}

.reason-content__text > h1.page-title {
	margin-top: 0;
	margin-bottom: 2rem;
}

@media (width >= 1100px) {
	.reason-content {
		flex-direction: row;
		gap: 4rem;
	}
}

.reason-content__image {
	margin-bottom: 0;
	flex: 1 0 100%;
}

@media (width >= 1100px) {
	.reason-content__image {
		flex: 0 0 40%;
	}
}

.reason-content__text > p {
	font-size: var(--h2-size);
	margin-top: 0;
}