<!DOCTYPE html>
<title>Time of Crisis - Cards</title>
<style>
html {
background-color: slategray;
}
.list {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 40px;
}
.card {
width: 250px;
height: 350px;
background-size: 250px 350px;
background-repeat: no-repeat;
border-radius: 12px;
box-shadow: 0 0 0 1px #444, 0 0 4px #000;
}
.card.event_back{background-image:url(../cards.1x/event_back.jpg)}
.card.event_1{background-image:url(../cards.1x/event_01.jpg)}
.card.event_2{background-image:url(../cards.1x/event_02.jpg)}
.card.event_3{background-image:url(../cards.1x/event_03.jpg)}
.card.event_4{background-image:url(../cards.1x/event_04.jpg)}
.card.event_5{background-image:url(../cards.1x/event_05.jpg)}
.card.event_6{background-image:url(../cards.1x/event_06.jpg)}
.card.event_7{background-image:url(../cards.1x/event_07.jpg)}
.card.event_8{background-image:url(../cards.1x/event_08.jpg)}
.card.event_9{background-image:url(../cards.1x/event_09.jpg)}
.card.event_10{background-image:url(../cards.1x/event_10.jpg)}
.card.event_11{background-image:url(../cards.1x/event_11.jpg)}
.card.event_12{background-image:url(../cards.1x/event_12.jpg)}
.card.event_13{background-image:url(../cards.1x/event_13.jpg)}
.card.event_14{background-image:url(../cards.1x/event_14.jpg)}
.card.event_15{background-image:url(../cards.1x/event_15.jpg)}
.card.event_16{background-image:url(../cards.1x/event_16.jpg)}
.card.event_17{background-image:url(../cards.1x/event_17.jpg)}
.card.event_18{background-image:url(../cards.1x/event_18.jpg)}
.card.event_19{background-image:url(../cards.1x/event_19.jpg)}
.card.influence_back{background-image:url(../cards.1x/influence_back.jpg)}
.card.influence_m1{background-image:url(../cards.1x/influence_m1.jpg)}
.card.influence_m2{background-image:url(../cards.1x/influence_m2.jpg)}
.card.influence_m3{background-image:url(../cards.1x/influence_m3.jpg)}
.card.influence_m4{background-image:url(../cards.1x/influence_m4.jpg)}
.card.influence_p1{background-image:url(../cards.1x/influence_p1.jpg)}
.card.influence_p2{background-image:url(../cards.1x/influence_p2.jpg)}
.card.influence_p3{background-image:url(../cards.1x/influence_p3.jpg)}
.card.influence_p4{background-image:url(../cards.1x/influence_p4.jpg)}
.card.influence_s1{background-image:url(../cards.1x/influence_s1.jpg)}
.card.influence_s2{background-image:url(../cards.1x/influence_s2.jpg)}
.card.influence_s3{background-image:url(../cards.1x/influence_s3.jpg)}
.card.influence_s4{background-image:url(../cards.1x/influence_s4.jpg)}
@media (min-resolution:97dpi) {
.card.event_back{background-image:url(../cards.2x/event_back.jpg)}
.card.event_1{background-image:url(../cards.2x/event_01.jpg)}
.card.event_2{background-image:url(../cards.2x/event_02.jpg)}
.card.event_3{background-image:url(../cards.2x/event_03.jpg)}
.card.event_4{background-image:url(../cards.2x/event_04.jpg)}
.card.event_5{background-image:url(../cards.2x/event_05.jpg)}
.card.event_6{background-image:url(../cards.2x/event_06.jpg)}
.card.event_7{background-image:url(../cards.2x/event_07.jpg)}
.card.event_8{background-image:url(../cards.2x/event_08.jpg)}
.card.event_9{background-image:url(../cards.2x/event_09.jpg)}
.card.event_10{background-image:url(../cards.2x/event_10.jpg)}
.card.event_11{background-image:url(../cards.2x/event_11.jpg)}
.card.event_12{background-image:url(../cards.2x/event_12.jpg)}
.card.event_13{background-image:url(../cards.2x/event_13.jpg)}
.card.event_14{background-image:url(../cards.2x/event_14.jpg)}
.card.event_15{background-image:url(../cards.2x/event_15.jpg)}
.card.event_16{background-image:url(../cards.2x/event_16.jpg)}
.card.event_17{background-image:url(../cards.2x/event_17.jpg)}
.card.event_18{background-image:url(../cards.2x/event_18.jpg)}
.card.event_19{background-image:url(../cards.2x/event_19.jpg)}
.card.influence_back{background-image:url(../cards.2x/influence_back.jpg)}
.card.influence_m1{background-image:url(../cards.2x/influence_m1.jpg)}
.card.influence_m2{background-image:url(../cards.2x/influence_m2.jpg)}
.card.influence_m3{background-image:url(../cards.2x/influence_m3.jpg)}
.card.influence_m4{background-image:url(../cards.2x/influence_m4.jpg)}
.card.influence_p1{background-image:url(../cards.2x/influence_p1.jpg)}
.card.influence_p2{background-image:url(../cards.2x/influence_p2.jpg)}
.card.influence_p3{background-image:url(../cards.2x/influence_p3.jpg)}
.card.influence_p4{background-image:url(../cards.2x/influence_p4.jpg)}
.card.influence_s1{background-image:url(../cards.2x/influence_s1.jpg)}
.card.influence_s2{background-image:url(../cards.2x/influence_s2.jpg)}
.card.influence_s3{background-image:url(../cards.2x/influence_s3.jpg)}
.card.influence_s4{background-image:url(../cards.2x/influence_s4.jpg)}
}
</style>
<body>
<div class="list">
<div class="card influence_m1"></div>
<div class="card influence_m2"></div>
<div class="card influence_m3"></div>
<div class="card influence_m4"></div>
</div>
<div class="list">
<div class="card influence_p1"></div>
<div class="card influence_p2"></div>
<div class="card influence_p3"></div>
<div class="card influence_p4"></div>
</div>
<div class="list">
<div class="card influence_s1"></div>
<div class="card influence_s2"></div>
<div class="card influence_s3"></div>
<div class="card influence_s4"></div>
</div>
<div class="list">
<div class="card event_back"></div>
<div class="card event_1"></div>
<div class="card event_2"></div>
<div class="card event_3"></div>
<div class="card event_4"></div>
<div class="card event_5"></div>
<div class="card event_6"></div>
<div class="card event_7"></div>
<div class="card event_8"></div>
<div class="card event_9"></div>
<div class="card event_10"></div>
<div class="card event_11"></div>
<div class="card event_12"></div>
<div class="card event_13"></div>
<div class="card event_14"></div>
<div class="card event_15"></div>
</div>
</body>