/* Screen */
@media screen {

	/* Base */
	* {
		box-sizing: border-box;
	}
	body {
		background-color: #eeeeee;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		margin: 0;
	}

	/* Header */
	.header {
		display: block;
	}
	.header__container {
		background: white;
		margin: 0 auto;
		max-width: 100%;
		padding: 20px;
		width: 1024px;
	}
	.header__logo {
		margin: 0;
	  padding: 0;
	}
	.header__logo-img {
	  display: block;
	  height: 30px;
	  width: auto;
	}

	/* Heading */
	.heading {
		display: block;
	}
	.heading__container {
		background-color: #ccc;
		margin: 0 auto;
		max-width: 100%;
		padding: 20px;
		width: 1024px;
	}

	/* Browser List */
	.browser {
		display: block;
	}
	.browser__container {
		margin: 0 auto;
		max-width: 100%;
		padding: 20px;
		width: 1024px;
	}
	.browser__list {
		display: block;
		list-style: none;
		margin: -20px -10px 0 -10px;
		padding: 0;
		text-align: center;
	}
	.browser__list-item {
		display: inline-block;
		margin: 20px 10px 0 10px;
	}
	.browser__link {
		color: inherit;
		display: inline-block;
		text-decoration: none;
	}
	.browser__link-img {
		height: auto;
		width: 80px;
	}
	.browser__link-label {
		display: block;
		margin-top: 10px;
		text-align: center;
	}
	.browser__link:hover .browser__link-label {
		text-decoration: underline;
	}

}


/* Small screen */
@media screen and (min-width: 768px) {

	/* Header */
	.header__container {
		padding: 20px 40px;
	}

	/* Heading */
	.heading__container {
		padding: 40px;
	}
	.heading__grid {
		margin: 0 -20px;
		overflow: auto;
	}
	.heading__grid-col {
		float: left;
		padding: 0 20px;
		width: 50%;
	}

	/* Browser */
	.browser__container {
		padding: 40px;
	}
	.browser__list {
		margin: -40px -20px 0 -20px;
	}
	.browser__list-item {
		margin: 40px 20px 0 20px;
	}
	.browser__link-img {
		width: 160px;
	}

}