/* Apps
   Complemento ao main.css (Dimension by HTML5 UP) para o separador Apps. */

/* O #wrapper centra o #header verticalmente distribuindo três filhos com
   justify-content: space-between — o :before vazio, o #header e o #footer.
   Como o footer foi removido, ficavam só dois e o header caía para o fundo.
   Este :after repõe o terceiro e devolve o header ao centro. */

	#wrapper:after {
		content: '';
		display: block;
	}

/* O separador Apps é mais largo do que os restantes para caber a grelha
   de duas colunas — Mac à esquerda, iPad à direita. */

	#main article#apps {
		width: 56rem;
	}

	.app-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem 2.5rem;
	}

		/* Mantém uma app na coluna da direita quando a equivalente para Mac
		   ainda não existe e a célula da esquerda fica vazia. */
		.app-grid .app-col-ipad {
			grid-column: 2;
		}

	.app {
		display: flex;
		align-items: flex-start;
	}

		.app .app-icon {
			display: block;
			flex: 0 0 auto;
			width: 3.5rem;
			margin: 0 1rem 0 0;
			border-bottom: 0;
			border-radius: 0.8rem;
			overflow: hidden;
			box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.4);
			-moz-transition: -moz-transform 0.2s ease-in-out;
			-webkit-transition: -webkit-transform 0.2s ease-in-out;
			-ms-transition: -ms-transform 0.2s ease-in-out;
			transition: transform 0.2s ease-in-out;
		}

			/* Só o ícone que é link reage ao hover. */
			.app a.app-icon:hover {
				-moz-transform: scale(1.05);
				-webkit-transform: scale(1.05);
				-ms-transform: scale(1.05);
				transform: scale(1.05);
			}

			.app .app-icon img {
				display: block;
				width: 100%;
				height: auto;
			}

		.app .app-body {
			flex: 1 1 auto;
			min-width: 0;
		}

			.app .app-body h3 {
				margin: 0 0 0.15rem 0;
				font-size: 0.8rem;
				letter-spacing: 0.15rem;
			}

			.app .app-body .app-meta {
				display: block;
				margin: 0 0 0.75rem 0;
				color: rgba(255, 255, 255, 0.5);
				font-size: 0.55rem;
				line-height: 1.9;
				letter-spacing: 0.15rem;
				text-transform: uppercase;
			}

			.app .app-body p {
				margin: 0 0 1rem 0;
				font-size: 0.8rem;
				line-height: 1.6;
			}

			.app .app-body ul.actions {
				margin-bottom: 0;
			}

				.app .app-body ul.actions li {
					padding-left: 0.75rem;
				}

				.app .app-body .button {
					height: 2.1rem;
					line-height: 2.1rem;
					padding: 0 0.85rem 0 0.95rem;
					font-size: 0.55rem;
					letter-spacing: 0.15rem;
				}

	@media screen and (max-width: 980px) {

		.app-grid {
			grid-template-columns: 1fr;
			gap: 2rem;
		}

			.app-grid .app-col-ipad {
				grid-column: auto;
			}

	}

	@media screen and (max-width: 736px) {

		.app {
			display: block;
		}

			.app .app-icon {
				width: 3.25rem;
				margin: 0 0 0.75rem 0;
			}

	}