模板:勋章/styles.css

.medal-entry {
	background: #555;
	background: rgba(255, 255, 255, 0.33);
	display: grid;
	grid-template:
		"icon name"
		"text text";
	padding: 5px;
}

@media screen and (min-width: 540px) {
	.medal-entry {
		grid-template:
			"icon name" 3em
			"icon text" auto / 225px auto;
		max-width: 800px;
	}
}

.medal-entry-icon,
.medal-entry-name,
.medal-entry dl {
	background: #343434;
	padding: 0.5em;
}

.medal-entry-icon {
	grid-area: icon;
	overflow: hidden;
	padding: 0;
}

.medal-entry .tabber {
	display: grid;
	grid-template-areas:
		"tab"
		"nav";
}

.medal-entry .tabbernav {
	display: flex;
	flex-wrap: wrap;
	grid-area: nav;
}

.medal-entry .tabbernav li {
	flex: 1 0 20%;
}

.medal-entry .tabbernav li a {
	display: block;
	width: 75%;
}

.medal-entry .tabbertab {
	grid-area: tab;
}

.medal-entry img {
	height: auto;
	transform: translate(-4px, -8px);
	width: 225px;
}

.medal-entry-name {
	font-size: 1.2em;
	grid-area: name;
}

.medal-entry dl {
	grid-area: text;
	margin: 0;
}

.medal-entry dl div {
	border-top: 1px solid;
	color: #c8c8c8;
	display: grid;
	grid-template-columns: 6em auto;
	padding: 0.5em 0;
}

.medal-entry dt::after {
	content: '：';
}

.medal-entry dd {
	margin: 0;
}