chaoticbackup.github.io/src/css/collection.css

@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;
    text-align: center;
    margin-top: 2px;
}

.mull input {
    vertical-align: middle;
}

.mcbp input {
    width: 24px;
    height: 14px;
    padding: unset;
    text-align: center;
    margin-top: 2px;
}

.and {
    vertical-align: text-bottom;
    padding: 0 4px;
}

} /* 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;
}

.bigger {
    font-size: 14px;
}

.thumb {
    width: 100px;
    height: 98px;
}

.Collapsible {
    margin-bottom: 10px;
    width: 250px;
}

.Collapsible__trigger {
    background-color: #333;
    display: block;
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    text-indent: 5px;
}

.Collapsible__trigger:hover {
    background-color: red;
}

.Collapsible__trigger:after {
    content: '^';
    position: absolute;
    right: 10px;
    top: 10px;
    display: block;
    transition: transform 400ms;
}

.Collapsible__trigger.is-open:after {
    transform: rotateZ(180deg);
    right: 5px;
    top: 5px;
}


.Collapsible__trigger.is-disabled {
    opacity: 0.5;
    background-color: grey;
}

.left {
    position: relative;
}


.card_img {
    position: absolute;
    width: 100%;
    left: -10px;
    z-index: 2;
}

.card_img .hidden {
    display: none;
    max-height 0;
}

.card_img img {
   max-width: 250px;
   max-height: 350px;
}