#market_view {
	margin: 0;
}

.market-group {
	display: flex;
	flex: 1;

	& > article {

		.border(true);

		background-color: @color-white;
		display: flex;
		flex-direction: column;

		// Not the most ideal implementation, but we'd need to do a refactor of the overall layout to accomodate something like a flexed row height that doesn't exceed the window height
		.market-content-scrollable {
			max-height: 30rem;
			overflow-y: scroll;
		}

		h3 {
			margin-left: 1em;
		}

		&:first-child {
			flex: 3;
			margin: 1rem 0.5rem 0.5rem 1rem;

			@media @breakpoint-mobile {
				margin: 0;
			}

			& + article {
				flex: 1;
				margin: 1rem 1rem 0.5rem 0.5rem;
			}
		}
	}

	&:last-child {
		& > article {
			&:first-child {
				margin: 0.5rem 0.5rem 0.5rem 1rem;

				@media @breakpoint-mobile {

					.border(false);

					margin: 0;
				}

				& + article {
					margin: 0.5rem 1rem 0.5rem 0.5rem;
				}
			}
		}
	}
}