Как можно задать разные фоны для псевдоэлемента ::before у элементов с одинаковыми стилями?

1. Для задания разных фонов для псевдоэлемента ::before у элементов с одинаковыми стилями можно использовать разные классы или атрибуты элементов. Например, можно задать разные фоны через :before с помощью псевдоэлемента :nth-child() для каждого элемента:

```css
.element:nth-child(1)::before {
  background: url('background1.jpg');
}

.element:nth-child(2)::before {
  background: url('background2.jpg');
}

.element:nth-child(3)::before {
  background: url('background3.jpg');
}
```

2. Для организации структуры CSS и сохранения одинакового представления и поведения для каждой из карточек при наведении курсора на контейнеры можно использовать классы и псевдоэлементы. Например:

HTML:
```html
<div class="container">
  <div class="card"></div>
</div>
```

CSS:
```css
.container {
  position: relative;
  overflow: hidden;
}

.card {
  width: 100px;
  height: 100px;
  background: #fff;
  transition: all 0.3s;
}

.container:hover .card {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: all 0.3s;
}

.container:hover .card::before {
  background: rgba(0, 0, 0, 0.1);
}
```

Таким образом, при наведении курсора на контейнер с карточкой, контейнер получит тень и псевдоэлемент ::before будет менять прозрачность, сохраняя при этом одинаковое представление и поведение для каждой из карточек.