#motto {
	font-family: "Montserrat", sans-serif;
	/* color: var(--main-color); */
	color: #fff;
	/* text-transform: uppercase; */
	letter-spacing: .01em;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-align: center;
	padding-top: 100px;
	width: 100%;
	max-width: 100vw;
}

#motto h2 {
	color: #fff;
	font-size: 3vh;
	font-family: "Montserrat", sans-serif;
	font-weight:700;
	line-height: 1.3;
	letter-spacing: .01em;
	filter: drop-shadow(4px 4px 8px #111);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

#motto .inside {
	padding-top: 3dvh;
	padding-bottom: 4dvh;
	padding-left: var(--ipad-padding);
	padding-right: var(--ipad-padding);
	margin: 0 auto;
	position: relative;
	width: 100%;
	max-width: 100vw;
}

#motto .inside > div {
	max-width: 750px;
	margin:auto;
}

.home #motto .inside::before {
	content:"";
	display: block;
	position: absolute;
	left:0;
	bottom:0;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, rgba(10,10,10,.95), rgba(255,255,255,0) 98%);
	mix-blend-mode: multiply;
}

#motto .swiper-wrapper {
	align-items: flex-end;
}

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 992px) {

}

@media screen and (max-width: 768px) {

	#motto .inside {
		padding-bottom: 3dvh;
	}

	#motto {
		font-size: 1.8vh;
	}

}

@media screen and (max-width: 640px) {

	#motto .inside {
		padding-left: var(--mob-padding);
		padding-right: var(--mob-padding);
	}
}