@media only screen and (max-width:428px) {
	body {
		font-size: 1em;
	}
	header, section, footer {
		padding: 20px 0;
		width: 428px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.content {
		width: 100%;
		padding: 20px;
	}
	p#copyright {
		margin: 10px 0;
		text-align: center;
	}
	p.text {
		display: none;
	}
	p.text-mobile {
		display: block;
		margin-bottom: 10px;
	}

	/* TEXT */
	h1 {
		text-align: center;
	}
	h2 {
		font-size: 23px;
		letter-spacing: 0.5em;
		margin: 0;
	}
	/* NAV */
	nav {
		margin: 10px;
		display: flex;
		justify-content: space-between;
	}
	nav ul {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		padding: 0;
		display: flex;
		justify-content: center;
		gap: 12px;
	}
	nav ul li {
		margin-left: 0;
		margin-right: 5px;
	}
	nav ul li a {
		font-size: 0.8em;
	}
	#map {
		padding: 0;
	}
	iframe {
		border: 0;
		width: 100%;
	}

	/* FEATURE */
	#feature {
		flex-direction: column;
	}
	#feature-text {
		flex-basis: 100%;
		padding-right: 0;
	}
	#cta {
		width: 100%;
		height: auto;
		margin-top: 20px;
	}

	/* LESSONS & VIDEOS */
	#lessons, #videos {
		flex-direction: column;
    }
	.lesson, .video {
		flex-basis: 100%;
		width: 100%;
		margin-bottom: 20px;
	}

	/* ABOUT */
	#masters {
		width: 100%;
		flex-direction: column;
	}
	#schoolmasters {
		flex-direction: column;
	}
	#headmaster, #faculty {
		flex-basis: 100%;
	}
	#faculty {
		justify-content: center;
	}
	
	/* CONTACT */
	#contact {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.contact-details {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		gap: 5px;
	}
	.contact-details label {
		flex-basis: content;
	}
	#address {
		text-align: center;
		gap: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
	}
 
 	/* FORM */
 	#skill-level-options {
 		flex-direction: column;
 		gap: 10px;
 	}
	
	/* SOCIAL MEDIA */
	#socmed ul {
		justify-content: center;
		flex-wrap: wrap;
		gap: 15px;
	}
	#socmed ul li svg {
		width: 28px;
	}

	/* UGC */
	#ugc .ugc-feed {
		grid-template-columns: 1fr;
	}
	#ugc .ugc-form-iframe {
		height: 920px; /* mobile needs more height */
	}
	#ugc .ugc-avatar {
		width: 40px;
		height: 40px;
	}
	#ugc .ugc-card {
	padding: 16px;
	}
}