flex layout (product compare fork)

by James Connolly

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<div class="wrapper">
  <div class="products-compare mq1">
    
		<div class="compare-column">
			<header class="compare-header">
				<h4>subtitle</h4>
				<h2>main-title</h2>
			</header>
			<ul class="compare-list">
				<li>
					<p>Version</p>
				</li>
				<li>
					<p>List Item 1</p>
				</li>
				<li>
					<p>List Item 1</p>
				</li>
				<li>
					<p>List Item 1</p>
				</li>
				<li>
					<p>List Item 1</p>
				</li>
				<li>
					<p>List Item 1</p>
				</li>
				
			</ul>
    </div>
		
		<div class="compare-column">
			<header class="compare-header">
				<img src="https://via.placeholder.com/150x250" />
			</header>
			<ul class="compare-list">
				<li class="compare-title">
					<strong>Model 1</strong>
				</li>
				<li>
					<p>List Item 1</p>
					<span><i class="fas fa-check"></i></span>
				</li>
				<li>
					<p>List Item 1</p>
					<span><i class="fas fa-check"></i></span>
				</li>
				<li>
					<p>List Item 1</p>
					<span><i class="fas fa-check"></i></span>
				</li>
				<li>
					<p>List Item 1</p>
					<span><i class="fas fa-check"></i></span>
				</li>
				<li>
					<p>List Item 1</p>
					<span><i class="fas fa-check"></i></span>
				</li>
				
			</ul>
    </div>
		
		<div class="compare-column">
			<header class="compare-header">
				<img src="https://via.placeholder.com/150x250" />
			</header>
			<ul class="compare-list">
				<li class="compare-title">
					<strong>Model 1</strong>
				</li>
				<li>
					<p>List Item 1</p>
					<span><i class="fas fa-check"></i></span>
				</li>
				<li>
					<p>List Item 1</p>
					<span><i class="fas fa-check"></i></span>
				</li>
				<li>
					<p>List Item 1</p>
					<span><i class="fas fa-check"></i></span>
				</li>
				<li>
					<p>List Item 1</p>
					<span><i class="fas fa-check"></i></span>
				</li>
				<li>
					<p>List Item 1</p>
					<span><i class="fas fa-check"></i></span>
				</li>
				
			</ul>
  ...

SCSS

body {
  font-family: arial, helvetica, sans-serif;
  margin: 0;
  padding: 0;
	
	background: navy;
	color: white;
}

.wrapper {
  margin: 50px auto;
  width: 92%;
  background: rgba(255,255,255,0.12);
  
  &.mq {
    max-width: 400px;
  }
}

//////////// native styles /////////////

.products-compare {
	
	.compare-column {
		padding: 10px;
		margin-bottom: 20px;
		border-radius: 6px;
		box-sizing: border-box;
		background: white;
		color: navy;
		
		//main left column styling
		&:nth-child(1) {
			background: none;
			
			.compare-header {
				text-align: center;
				
				h2 {
					color: white;
				}
				
				h4 {
					color: skyblue;
				}
			}
			
			.compare-list {
				display: none;
				
				li {
					color: white;
					background: black;
					background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
				}
			}
		}
	}
	
	.compare-header {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		margin: 0 0 25px;;
		padding: 10px;
		
		h2, h4 {
			margin: 0;
		}
		
		img {
			display: block;
			height: 100%;
			margin: 0 auto
		}
	}
	
	.compare-list {
		margin: 0;
		padding: 0;
		list-style-type: none;
		
		li {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: space-between;
			padding: 15px;
			margin-bottom: 10px;
			border-radius: 6px;
			background: rgb(148,238,255);
      background: linear-gradient(90deg, rgba(148,238,255,1) 0%, rgba(148,238,255,0) 100%);
			
			&.compare-title {
				justify-content: center;
			}
		}
		
		p, strong {
			margin: 0;
		}
		
		span {
			display: inline-block;
			padding-left: 35px;
		}
		
		i {
			transform: scale(1.75);
		}
	}
	
	//////////// media queries /////////////
	
	&.mq1 /*xlarge media query*/ {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		margin: 0 -10px;

		.compare-column {
			flex: 1 1 33.333%;
			margin: 0 10px;
			
			.compare-header {
				min-height: 400px;
			}
			
			&:not(:first-of-type)...