<!DOCTYPE html>
<meta name="viewport" content="width=620">
<title>Time of Crisis - Cards</title>
<style>
html {
background-color: slategray;
}
h2 {
color: white;
margin: 20px 40px;
border-bottom: 2px solid white;
}
.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 4px #000;
}
.card.event.event_0 { background-color: #b73c26; }
.card.event { background-color: #f1f2f4; }
.card.influence.influence_back { background-color: #5c1d57; }
.card.influence { background-color: #ece8dc; }
.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)}
.card.influence_s4_v2{background-image:url(../cards.1x/influence_s4_v2.jpg)}
.card.influence_m2x{background-image:url(../cards.1x/influence_m2x.jpg)}
.card.influence_m3x{background-image:url(../cards.1x/influence_m3x.jpg)}
.card.influence_m4x{background-image:url(../cards.1x/influence_m4x.jpg)}
.card.influence_p2x{background-image:url(../cards.1x/influence_p2x.jpg)}
.card.influence_p3x{background-image:url(../cards.1x/influence_p3x.jpg)}
.card.influence_p4x{background-image:url(../cards.1x/influence_p4x.jpg)}
.card.influence_s2x{background-image:url(../cards.1x/influence_s2x.jpg)}
.card.influence_s3x{background-image:url(../cards.1x/influence_s3x.jpg)}
.card.influence_s4x{background-image:url(../cards.1x/influence_s4x.jpg)}
.card.influence_s3_v2{background-image:url(../cards.1x/influence_s3_v2.jpg)}
.card.influence_p4x_v2{background-image:url(../cards.1x/influence_p4x_v2.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)}
.card.influence_s4_v2{background-image:url(../cards.2x/influence_s4_v2.jpg)}
.card.influence_m2x{background-image:url(../cards.2x/influence_m2x.jpg)}
.card.influence_m3x{background-image:url(../cards.2x/influence_m3x.jpg)}
.card.influence_m4x{background-image:url(../cards.2x/influence_m4x.jpg)}
.card.influence_p2x{background-image:url(../cards.2x/influence_p2x.jpg)}
.card.influence_p3x{background-image:url(../cards.2x/influence_p3x.jpg)}
.card.influence_p4x{background-image:url(../cards.2x/influence_p4x.jpg)}
.card.influence_s2x{background-image:url(../cards.2x/influence_s2x.jpg)}
.card.influence_s3x{background-image:url(../cards.2x/influence_s3x.jpg)}
.card.influence_s4x{background-image:url(../cards.2x/influence_s4x.jpg)}
.card.influence_s3_v2{background-image:url(../cards.2x/influence_s3_v2.jpg)}
.card.influence_p4x_v2{background-image:url(../cards.2x/influence_p4x_v2.jpg)}
}
</style>
<body>
<h2>Influence Cards</h2>
<div class="list">
<div class="card influence influence_m1"></div>
<div class="card influence influence_m2"></div>
<div class="card influence influence_m3"></div>
<div class="card influence influence_m4"></div>
</div>
<div class="list">
<div class="card influence influence_s1"></div>
<div class="card influence influence_s2"></div>
<div class="card influence influence_s3"></div>
<div class="card influence influence_s4"></div>
</div>
<div class="list">
<div class="card influence influence_p1"></div>
<div class="card influence influence_p2"></div>
<div class="card influence influence_p3"></div>
<div class="card influence influence_p4"></div>
</div>
<h2>Expansion Influence Cards</h2>
<div class="list">
<div class="card influence influence_m2x"></div>
<div class="card influence influence_m3x"></div>
<div class="card influence influence_m4x"></div>
</div>
<div class="list">
<div class="card influence influence_s2x"></div>
<div class="card influence influence_s3x"></div>
<div class="card influence influence_s4x"></div>
<div class="card influence influence_s4_v2"></div>
</div>
<div class="list">
<div class="card influence influence_p2x"></div>
<div class="card influence influence_p3x"></div>
<div class="card influence influence_p4x"></div>
</div>
<h2>Deluxe Influence Cards</h2>
<div class="list">
<div class="card influence influence_s3_v2"></div>
<div class="card influence influence_p4x_v2"></div>
</div>
<h2>Event Cards</h2>
<div class="list">
<div class="card event event_1"></div>
<div class="card event event_2"></div>
<div class="card event event_3"></div>
<div class="card event event_4"></div>
<div class="card event event_5"></div>
<div class="card event event_6"></div>
<div class="card event event_7"></div>
<div class="card event event_8"></div>
<div class="card event event_9"></div>
<div class="card event event_10"></div>
<div class="card event event_11"></div>
<div class="card event event_12"></div>
<div class="card event event_13"></div>
<div class="card event event_14"></div>
<div class="card event event_15"></div>
</div>
</body>