.container {

	.bloco-ilustrado {
		/* row-reverse: imagem vem antes no HTML, mas renderiza à direita */
		flex-direction: row-reverse;
		align-items: flex-start;
		gap: 30px;

		.coluna-ilustracao {
			flex: 0 0 260px;
			align-self: stretch;
		}

		.ilustracao {
			display: block;

			width: 260px;
			max-width: 100%;

			object-fit: contain;
			border-radius: 10px;
		}
	}

	.lista-orientacoes {
		display: flex;
		flex-direction: column;
		gap: 10px;

		margin: 0;

		list-style: none;
		line-height: 1.6;

		li {
			border: 1px solid var(--cor-borda-contraste);
			padding: 20px;
			border-radius: 10px;
		}
	}

	.observacao {
		color: var(--cor-fonte-secundaria);
		font-size: 1rem;
	}

	@media (max-width: 768px) {

		.bloco-ilustrado {
			flex-direction: column;
			align-items: stretch;

			.coluna-ilustracao {
				flex: 0 0 auto;
				align-self: auto;
			}

			.ilustracao {
				width: 100%;
			}
		}
	}
}