Template:CharacterTest/css

.container { max-width:850px; margin:auto; border:1px solid black; padding:1em; }

.grid-container { display:grid; }

.character-image, .character-details {

   grid-row: 1;
   text-align: center;

}

.character-description, .character-stat-bonus, .character-class, .character-valor-chant, .character-skills, .character-weapon { padding: 1em; }

.character-description, .character-stat-bonus { grid-row: 2; }

.character-class, .character-valor-chant { grid-row: 3; }

.character-skills, .character-weapon { grid-column-start: 1; grid-column-end: 3; }

.character-skills { grid-row: 4; }

.character-weapon { grid-row: 5; }

@media only screen and (max-width: 768px) { .character-image { grid-row: 1; }

.character-details { grid-row: 2; text-align: center; }

.character-description, .character-stat-bonus, .character-class, .character-valor-chant, .character-skills, .character-weapon { padding: 1em; }

.character-description { grid-row: 3; }

.character-stat-bonus { grid-row: 4; }

.character-class { grid-row: 5; }

.character-valor-chant { grid-row: 6; }

.character-skills, .character-weapon { grid-column-start: 1; grid-column-end: 2; }

.character-skills { grid-row: 7; }

.character-weapon { grid-row: 8; } }