:root {
	--title-margin: 32px;
}

.title2 {
	padding-top: var(--title-margin);
}

.sidemenu--content .title2:first-of-type, .card .title2 {
	padding-top: 0;
	margin-top: 0;
}

.family-quote-grid, .family-image {
	margin: var(--title-margin) 0;
}

.family-image-nobottom {
	margin: var(--title-margin) 0 0;
}

.card {
	margin-top: 32px;
}

.section--practical {
	padding-top: var(--title-margin);
	padding-bottom: var(--title-margin);
}

.lilac__background {
	padding-bottom: var(--title-margin);
}

blockquote.title1 {
	padding: 0;
	margin-top: var(--title-margin);
}

blockquote div {
	margin-top: 8px;
}

.section--practical blockquote {
	margin-top: 0;
	margin-bottom: 32px;
}

.sidemenu--select {
    margin-bottom: 32px;
}

.title3, .title2 {
	color: var(--colours-purple-primary-2);
}

.title1 {
	padding: 16px 0;
}

@media only screen and (min-width:768px) {
	.title1 {
		padding: 32px 0;
	}
}

@media only screen and (min-width:768px) {
	:root {
		--title-margin: 48px;
	}
	
	.family-quote-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 30px;
	}
	
	.family-quote-grid blockquote,.section--practical .title1 {
		margin-top: 0;
	}
	
	.family-costume, .family-safety, .family-camping {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 30px;
	}
	
	.family-cards {
		margin-top: 16px;
	}
	
	.section--practical blockquote {
		margin-bottom: 0
	}
}