Селекторы, часть 2 [19/20] 100%

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

Прошу, оцените код.
Уместо ли я здесь использовать абсолютное позиционирование? Или лучше бы обойтись без него?

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: псевдоэлементы</title>
    <link rel="stylesheet" href="course.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="two-cards">
    <div class="ace-heart"></div>
    <div class="two-spade"></div>
  </body>
</html>

CSS

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);
}

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

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

.two-cards .ace-heart::after {
  content: "A";
  position: absolute;
  bottom: 5px;
  right: 5px;
  height: 50px;
  
  background: url("heart.svg") no-repeat bottom;
  background-size: 25px;
  vertical-align: bottom;
  font-size: 25px;
  font-weight: bold;
  color: red;
}

.two-cards .two-spade::before {
  content: "2";
  position: absolute;
  top: 5px;
  left: 5px;
  height: 50px;
  
  background: url("spade.svg") no-repeat bottom;
  background-size: 25px;
  
  font-size: 25px;
  font-weight: bold;
}

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

.two-cards .two-spade::after {
  content: "2";
  position: absolute;
  right: 5px;
  bottom: 5px;
  height: 50px;
  
  background: url("spade.svg") no-repeat bottom;
  background-size: 25px;
  font-size: 25px;
  font-weight: bold;
  }
2

уместно, только код длиннее будет.
теперь объедините селекторы, чтобы код покороче был, много повторений.

подсказка

19/20 100% Оцените, пожалуйста, код

3

спасибо