Cacher is the code snippet organizer for pro developers

<div class="inner inner-lg">
	<div class="item01">
		item01
	</div>
	<div class="item02">
		item02
	</div>
</div>
	

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
// .inner { background: #fff; margin: 3rem auto; padding: 3rem 0;} // 視認性用

.item01 {  // 視認性用
	border: 3px solid #aaa;
	height: 300px;
}
.item02 {  // 視認性用
	border: 3px solid #ccc;
}
$breakpoints: (
	sp: "only screen and (max-width: 559px)",
	tb: "only screen and (max-width: 959px)",
	pc: "only screen and (min-width: 960px)"
);
@mixin media($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}
.pc {
  @include media(sp) {
    display: none !important;
  }
}
.sp {
  @include media(pc) {
    display: none !important;
  }
}
/// 以下モジュール ---------------------------------

.inner {
	margin-top: 3rem;	// 視認用
	background: #fff;	// 視認用
	width: calc( 100% - 256px);
	max-width: 1200px;
}
@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;
}

@charset "UTF-8";

// 関連ファイル------------------------------------


// プロジェクト依存設定 ------------------------------------
// $breakpoints: (
// 	sp: "only screen and (max-width: 559px)",
// 	tb: "only screen and (max-width: 959px)",
// 	pc: "only screen and (min-width: 960px)"
// );
// @mixin media($breakpoint) {
//   @media #{map-get($breakpoints, $breakpoint)} {
//     @content;
//   }
// }
//  -----------------------------------------------------


.inner {
	width: calc( 100% - 256px);
	max-width: 1200px;
}
.inner-lg {
	max-width: 1480px;
}
@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%;
	}
}