Template:Scratchpad/Style.css

.page-grid {
display: flex;
flex-flow: column nowrap;
}

.intro-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px,1fr));
grid-gap: 2em;
}

.weapon-infobox {
display: grid;
grid-auto-flow: row;
padding: 16px;
justify-content: center;
}

@media screen and (max-width: 640px) {
.weapon-infobox {
grid-row: 1 / span 1;
}
}

.infobox-title{
font-size: 1.25em;
font-weight: 300;
letter-spacing: 0.04em;
color: var(--color-base--emphasized);
text-align: center;
margin-bottom: 8px;
}

.weapon-image {
display: grid;
justify-items: center;
padding: 16px;
}

.weapon-details {
display: grid; 
grid-gap: 16px; 
grid-template-columns: repeat(3, minmax(80px, 1fr));
padding: 16px;
justify-items: center;
}

.section-item {
display: grid; 
grid-auto-flow: row;
justify-items: center;
}

.info-label {
font-size: 0.8em;
letter-spacing: 0.04em;
color: var(--color-base--subtle);
}

.info-data {
font-size: 1em;
color: var(--color-base--emphasized);
}

p, li {
font-size: 0.9em;
}

.info-data img {
vertical-align: middle;
}

.behemoth-list {
display: flex; 
flex-flow: row wrap; 
justify-content: space-between; 
padding: 16px 0; 
font-size: 1.5vh; 
text-align: center;
color: var(--color-base--subtle);
}

.behemoth-list-item {
display: flex; 
flex-flow: column wrap;
}