Template:PerkGrid/styles.css

From FOnline 3 wiki
Jump to navigation Jump to search

.perk-grid {

 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 justify-content: center;

} .perk-grid .perk {

 box-sizing: border-box;
 text-align: center;
 flex: 1 1 360px;      /* will stack to 1 per row below ~1080px */
 max-width: 420px;     /* keeps blocks from getting too wide on huge screens */

} .perk-grid .perk table {

 margin-left: auto;    /* center any inner tables */
 margin-right: auto;

} @media (min-width: 1200px) {

 .perk-grid .perk {
   flex: 1 1 calc(33.333% - 12px); /* 3 per row on wide screens */
   max-width: none;
 }

}