Испытание: псевдоэлементы. 19/20.

Курсы §18. Селекторы. Часть 2
1

Всем привет! Получилось выполнить на 100%, но не выполнено условие по размерам (отступам) кратным 5px. Подскажите пожалуйста как это можно было бы реализовать по другому, или возможно не верный формат позиционирования масти? Заранее благодарен.

    html,
body {
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
  line-height: 30px;
}

body {
  min-width: 550px;
  min-height: 290px;
  padding: 10px;
}

.two-cards {
  width: 350px;
  height: 250px;
  padding: 10px;
  text-align: center;
}

.two-cards div {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 180px;
  margin: 0 10px;
  margin-top: 30px;
  vertical-align: middle;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Ширина иконок, не изменяйте */
.two-cards div::before,
.two-cards div::after {
  width: 20px;
}

/* Поворот нижней иконки */
.two-cards div::after {
  transform: rotate(180deg);
}

.ace-heart {
 background-image: url(heart.svg);
 background-repeat: no-repeat;
 background-position: 50% 50%;
 background-size: 50px;
 position: absolute;
}

.ace-heart::before {
  position: absolute;
 content: "A";
 color: red;
 top: 5px;
 left: 5px;
 font-size: 25px;
 font-weight: bold;
 background-image: url(heart.svg);
 background-repeat: no-repeat;
 background-position: -3px 25px;
 padding-bottom: 20px;
 background-size: 25px;
}


.ace-heart::after {
   position: absolute;
 content: "A";
 color: red;
 bottom: 5px;
 right: 5px;
 font-size: 25px;
 font-weight: bold;
 background-image: url(heart.svg);
 background-repeat: no-repeat;
 background-position: -3px 25px;
 padding-bottom: 20px;
 background-size: 25px;
}

.two-spade {
 background-image: url(spade.svg);
 background-repeat: no-repeat;
 background-position: 50% 50%;
 background-size: 50px;
 position: relative;
}

.two-spade::before {
  position: absolute;
 content: "2";
 color: black;
 top: 5px;
 left: 5px;
 font-size: 25px;
 font-weight: bold;
 background-image: url(spade.svg);
 background-repeat: no-repeat;
 background-position: 0 25px;
 padding-bottom: 20px;
 background-size: 25px;
 background-position: -3px 25px;
}

.two-spade::after {
  position: absolute;
 content: "2";
 color: black;
 bottom: 5px;
 right: 5px;
 font-size: 25px;
 font-weight: bold;
 background-image: url(spade.svg);
 background-repeat: no-repeat;
 padding-bottom: 20px;
  background-size: 25px;
 background-position: -3px 25px;
}
2

тут можно очень многое объединить. симметрия же.

программа максимум 
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
  line-height: 30px;
}

body {
  min-width: 550px;
  min-height: 290px;
  padding: 10px;
}

.two-cards {
  width: 350px;
  height: 250px;
  padding: 10px;
  text-align: center;
}

.two-cards div {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 180px;
  margin: 0 10px;
  margin-top: 30px;
  vertical-align: middle;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
}
.two-cards div::before,
.two-cards div::after {
  width: 20px;
}
.two-cards div::after {
  transform: rotate(180deg);
}
div,
div::before,
div::after{
  background: url(heart.svg) no-repeat 50% 50%;
  background-size: 50px;
}
div:nth-of-type(2),
div:nth-of-type(2)::before,
div:nth-of-type(2)::after
{
  background-image: url(spade.svg);
  color: black;
  content: "2"
}
div::before,
div::after {
  content: "A";
  display: block;
  position: absolute;
  font-size: 25px;
  font-weight: bold;
  color: red;
  background-size: 25px;
  padding-bottom: 45px;
}
div::before {
  top: 5px;
  left: 5px;
}
div::after {
  bottom: 5px;
  right: 5px;
}
1 лайк