@media only screen {
	.ugc {
		position: relative;
		padding: 1em;
	}
	.ugc .ugcGridWrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		box-sizing: border-box;
	}
	.ugc .ugcGridWrapper .image {
		margin-bottom: 9px;
		box-sizing: border-box;
	}
	.ugc .ugcGridWrapper.mobile1 .image {
		width: 100%;
	}
	.ugc .ugcGridWrapper.mobile2 .image {
		width: calc(50% - 12px);
		margin-left: 6px;
		margin-right: 6px;
	}
	.ugc .ugcGridWrapper .image img {
		min-width: 0;
		min-height: 0;
		overflow: hidden;
		height: auto;
		width: 100%;
	}
	.ugc .ugcGridWrapper .image a:hover {
		opacity: 0.5;
	}
	.ugc .loadMore {
		text-align: center;
		padding-top: 25px;
		justify-content: center;
		display: flex;
		align-items: center;
	}
	.ugc .loadMore button {
		margin: 1em 0;
		padding: 0 1em;
		color: #006d5b;
		border-color: #006d5b;
	}
	.ugc .loadMore button:hover {
		color: white !important;
		border-color: white !important;
		background-color: #006d5b;
	}
	.ugc .header {
		margin-bottom: 40px;
		font-family: Roboto, Arial, sans-serif;
		font-weight: 700;
		font-size: 1.75em;
		line-height: 1.1;
		text-transform: uppercase;
		color: #006d5b;
	}
	.ugc .header a {
		margin: 0.5em 0;
		font: inherit;
		color: inherit;
	}
	.ugc .header .hashtag {
		display: block;
	}
}

@media only screen and (min-width: 40.063em) {
	.ugc .ugcGridWrapper .image,
	.ugc .ugcGridWrapper.mobile1 .image,
	.ugc .ugcGridWrapper.mobile2 .image {
		margin-bottom: 10px;
		margin-left: 7px;
		margin-right: 7px;
		width: calc(50% - 14px);
	}
}

@media only screen and (min-width: 800px) {
	.ugc .ugcGridWrapper .image,
	.ugc .ugcGridWrapper.mobile1 .image,
	.ugc .ugcGridWrapper.mobile2 .image {
		margin-bottom: 14px;
		margin-left: 9px;
		margin-right: 9px;
		width: calc(25% - 18px);
	}
}

@media only screen and (min-width: 64.063em) {
	.ugc {
		max-width: 74em;
		margin: 0 auto;
	}
	.ugc .header {
		margin-left: 0.25em;
		font-family: Raleway, Arial, sans-serif;
		font-size: 36px;
		font-weight: 900;
	}
}