#extension{
.grid-auto-fit{margin-bottom: 10em;gap:3em;align-items: start;
	.exte-wrap {display:grid;justify-items: center;
	 .title{min-width:100%;}}
	}
.title{display: block;line-height: 4em;border-radius: 8px;padding: 0 .5em;margin:2em;background: #333;color: aliceblue;box-shadow: 0 14px 21px -8px rgb(0 0 0 / 56%);height: 4em;}
li .title{margin: -14px -15px 2em;}
small{color:#888;}
.sample {
	.grid{padding:4em 0;}
	.title {margin:-2em -2em 2em;}
	.merit,.demerit{display: grid;grid-template-columns: 5em auto;gap: 1em;padding: 1em 0;}
	.item{display: grid;gap:.5em;}
	.red{color: #e66;font-weight: 800;}
	}
.extension-menu{
	b{font-size: 115%;}
	.grid{gap: 1em;align-items: center;grid-template-columns: 6em auto;}
	.price {width: 100%;text-align: right;}
	}
p{display:grid;}
hr {
	border-width:0 0 8px;margin:3em 0;border-style:solid;width:100%;
	border-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(0, 0%, 65%, 1.0)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
}
}

@media (max-width: 768px) {
#extension{
 .title{margin:2em 0;}
}