/** ================================================================ **\
  * ================================================================ *
  * Desktop
  * ================================================================ *
\** ================================================================ **/

/** ================================================================ **\
  * Phablets [476px and up]
\** ================================================================ **/
@media only screen and (min-width: 476px) {
			.header__title--main { background-position-x: 2.4rem; }

			.header__subtitle--main {
				padding: 0 2.4rem 1.6rem;
			}

				.section__article { padding: 3.9rem 2.4rem 2.4rem; }

			.hero { padding: 3.2rem 2.4rem; }

						.main .article__paragraph {
							font-size: 2rem;
							line-height: 2.8rem;
							margin-top: 2.4rem;
						}

			.description {
				margin: 3.2rem auto 6.4rem;
				padding: 0 2.4rem;
			}


	.footer {
		font-size: 1.6rem;
		line-height: 2rem;
		padding: 2rem 2.4rem;
	}

		.footer__address {
			margin-top: .2rem;
			margin-bottom: -0.2rem;
		}

			.address__list { margin-bottom: .6rem; }

		.icon--play { margin-left: .8rem; }

			.pronunciation__icon--play { margin-top: 0; }
}


/** ================================================================ **\
  * Tablets and small desktops [768px and up]
\** ================================================================ **/
@media only screen and (min-width: 768px) {
			.hero {
				background-image: url(../images/hero.png);
				background-image: image-set(
					url(../images/hero.webp),
					url(../images/hero.png)
				);
			}
}


/** ================================================================ **\
  * Desktops [1440px and up]
\** ================================================================ **/
@media only screen and (min-width: 1200px) {
			.hero {
				background-repeat: repeat;
				background-size: contain;
			}
}