Cacher is the code snippet organizer for pro developers

<div class="inner inner-lg">
	<div class="items">
		
		<div class="item">
			<div class="flex u-sp-flex-reset">
				<div class="imgarea"><img src="" alt="image"></div>
				<div class="txtarea">
					<h1>見出し見出し見出し</h1>
					<div class="text">
						テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
					</div>
				</div>
			</div>
		</div>
		
		<div class="item flex">
			<div class="imgarea"><img src="" alt="image"></div>
			<div class="txtarea">
				<h1>見出し見出し見出し</h1>
				<div class="text">
					テキストテキストテキストテキストテキスト					テキストテキストテキストテキストテキスト
					テキストテキストテキストテキストテキスト
					テキストテキストテキストテキストテキスト

				</div>
			</div>
		</div>
		
	</div>
</div>

*, *::before, *::aftr {
	box-sizing: border-box;
}
.flex {
	display: flex;
}

@media screen and (max-width: 767px) {
	.u-sp-flex-reset {
			display: block;
			overflow: hidden;
	}
}
.inner {
	width: calc( 100% - 256px);
	max-width: 1200px;
	margin: 0 auto;
	background: #eee;
}
@media screen and (max-width: 1520px) and (min-width: 1281px) {
	.inner {
    width: calc(100% - 216px);
	}
}
@media screen and (max-width: 1280px) and (min-width: 768px) {
	.inner {
			width: calc(100% - 184px);
	}
}
@media screen and (max-width: 767px) {
.inner {
    width: 84%;
    max-width: 100%;
	}
}
.inner-lg {
	max-width: 1480px;
}

.items {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.item {
	width: calc( 100% / 2 - 60px );
	// max-width: 420px;
}
.item {
	border: 3px solid #ccc;
	background: #fff;
	height: 200px;
	margin-bottom: 80px;
}
@media screen and (max-width: 1279px) and (min-width: 768px) {
	.item {
			width: 100%;
			max-width: 100%;
			margin-bottom: 24px;
	}
}
@media screen and (max-width: 767px) {
	.item {
			width: 100%;
			max-width: 100%;
			margin-bottom: 24px;
	}
}

.imgarea {
	width: calc( 100% - 320px );
}
@media screen and (max-width: 767px) {
	.imgarea {
		width: 72px;
		height: 72px;
		float: right;
		border-radius: 50%;
		margin: 0 0 8px 16px;
	}
}
.txtarea {
	width: 280px;
}
.item .textarea {
	max-width: 520px;
}
@media screen and (max-width: 767px) {
	.item .txtarea {
			width: 100%;
			margin: 0;
	}
}
.imgarea {
	background: #eee;
}