@media only screen and (min-width: 975px) { .collection > .left { float: left; width: 30%; } .collection > .right { float: right; width: 70%; } .card { text-align: left; display: flex; border: 1px solid #AEAEAE; } .card .left, .card .right, .card .stats { padding-top: 2px; } .card .left { vertical-align: text-top; float: left; width: 210px; padding-left: 4px; } .card .right { float: left; width: calc(100% - (100px + 4px + 4px + 4px + 210px)); border-left: 2px solid #AEAEAE; padding-left: 4px; padding-right: 4px; padding-bottom: 6px; white-space: pre-line; } .creature .right { width: calc(100% - (100px + 4px + 4px + 4px + 210px + 40px + 4px)); } .creature .stats { vertical-align: text-top; float: left; text-align: right; width: 40px; padding-right: 4px; } .SearchForm { text-align: left; } .brainwashed { background-color: #dcdddf; color: black !important; } .flavortext, .chieftain { font-style: italic; } .disciplines input { width: 30px; height: 14px; } } /* desktop */ .card .icon14, .card .icon16, .card .icon20, .card .icon24 { vertical-align: middle; } .icon14 { height: 14px; padding-bottom: 2px; } .icon16 { height: 16px; } .icon20 { height: 20px; } .icon24 { height: 24px; } .card_img { width: 250px; height: 350px; } .card_img img { max-width: 250px; max-height: 350px; } .bigger { font-size: 14px; } .thumb { width: 100px; height: 98px; } .Collapsible { margin-bottom: 10px; } .Collapsible__trigger { background-color: #333; width: 250px; display: inline-block; padding-top: 5px; padding-bottom: 5px; text-indent: 5px; } .Collapsible__trigger:hover { background-color: red; }