@media only screen {
	.ugc {
		margin: 20px 5px;
	}
	.ugc .ugcGridWrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		text-align: center;
	}
	.ugc .ugcGridWrapper .image {
		padding: 5px;
	}
	.ugc .ugcGridWrapper.mobile1 .image {
		width: 100%;
	}
	.ugc .ugcGridWrapper.mobile2 .image {
		width: 50%;
	}
	.ugc .ugcGridWrapper.mobile3 .image {
		width: 33.3%;
	}
	.ugc .image img:hover {
		opacity: 0.5;
	}
	.ugc .loadMore {
		text-align: center;
		padding-top: 25px;
	}
	.ugc .loadMore button {
		margin: 0 auto;
		font-weight: 400;
		font-family: Oswald, sans-serif;
		font-size: 18px;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	.ugc .header {
		text-align: center;
		font-family: Oswald, sans-serif;
		font-weight: 500;
		font-size: 18px;
		line-height: 20px;
		text-transform: uppercase;
		margin-bottom: 20px;
	}
	.ugc .header a {
		font-size: 18px;
		color: #000;
	}
	.ugc .header .hashtag {
		color: #9600FF;
		font-weight: 700;
		font-size: 22px;
	}
}
@media only screen and (min-width: 641px) {
	.ugc .ugcGridWrapper .image {
		width: 50% !important;
	}
	.ugc .header a {
		font-size: 25px;
	}
	.ugc .header .hashtag {
		font-size: 30px;
	}	
}
@media only screen and (min-width: 800px) {
	.ugc .header a {
		font-size: 30px;
	}
	.ugc .header .hashtag {
		font-size: 34px;
	}
	.ugc .ugcGridWrapper .image {
		width: 25% !important;
	}
}
@media only screen and (min-width: 1500px) {
	.ugc .ugcGridWrapper .image {
		padding: 12px;
	}
}