/*
 * Intro Section
 */

.intro-section {
	background-origin: border-box, content-box, border-box;
	/* NOTE: The background-image property is overridden and randomized in the markup */
	background-image: linear-gradient(-135deg, transparent 60%, var(--yellow) 100%), url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAo5DSX0G0AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==), url('../../../media/characters/intro-section/intro-section-bg-px.png?v=20181126');
	background-repeat: no-repeat, no-repeat, repeat;
	background-size: auto, 480px 720px, auto;
	background-position: top left, calc( 50vw - 280px ) 120px, top left;
}

.intro-section .points .point {
	display: flex;
	align-items: center;
}
.intro-section .points .point .icon {
	min-width: 48px;
	max-width: 48px;
}
.intro-section .points .point .text {
	margin-left: var( --space-25 );
}

@media( max-width: 639px )  {
	.intro-section .intro {
		padding-bottom: 560px;
	}
	.intro-section .intro .h2 {
		font-size: 2.8rem;
	}
}

@media( min-width: 640px )  {
	.intro-section {
		background-size: auto, 640px 960px, auto;
		background-position: top left, calc( 50vw - 250px ) 280px, top left;
	}

	.intro-section .points .point .icon {
		min-width: 56px;
		max-width: 56px;
	}
}
@media( min-width: 1040px ) {
	.intro-section {
		background-size: auto, 640px 960px, auto;
		background-position: top left, 50vw 20px, top left;
	}
}
@media( min-width: 1480px ) {
	.intro-section {
		background-size: auto, 720px 1080px, auto;
		background-position: top left, 50vw 100px, top left;
	}

	.intro-section .points .point .icon {
		min-width: 64px;
		max-width: 64px;
	}
}