html,body{
    margin:0;
    padding:0;
}
body{
    width:350px;
    height:260px;
    padding-top:10px;
    padding-bottom:20px;
}
.cards{
    text-align:left;
}
.cards li{
    width:37px;
    height:55px;
}
li:not(:nth-of-type(1)){
    margin-left:-20px;
}
ul:after{
    display:block;
    position:absolute;
    right:0;
    top:0;
    width:37px;
    height:55px;
    border:1px dashed #33bb33;
    content:"";
    border-radius:5px;
}
li:nth-of-type(4n+1):not(:last-child){
    background:#ffcccc;
}
ul:not(:nth-of-type(1)) li:nth-of-type(4n+2):not(:last-child){
    background:#ccffcc;
}
ul:not(:nth-of-type(2n+1)) li:nth-of-type(4n+4):not(:last-child){
    background:#ccccff;
}
ul:not(:nth-of-type(4)) li:nth-of-type(4n+3):not(:last-child){
    background:#ccffff;
}
ul:nth-of-type(1) li:nth-of-type(2n):not(:last-child){
    background:#ffffcc;
}
ul:nth-of-type(3) li:nth-of-type(4n):not(:last-child){
    background:#ffccff;
}
selector{
    background:#ffffff;
}