Аукцион

[html]

.auction-event * {
box-sizing: border-box;
}

.auction-event::before {
content: '';
width: 110px;
height: 67px;
position: absolute;
top: -10px;
left: 50%;
z-index: 5;
transform: translatex(-50%);
background: url(https://forumstatic.ru/files/001c/9d/fb/33271.png);
}

.auction-header {
width: 100%;
height: auto;
background-color: rgb(var(--block-bg-main));
border-radius: 10px;
border: var(--border-thin);
position: relative;
padding: 31px 20px;
color: rgb(var(--text-color));
display: block;
}
.auction-header > div > span:first-of-type {
text-transform: lowercase;
text-align: center;
display: block;
color: rgba(150, 62, 53, 1);
box-shadow: none !important;
font: var(--fw600) 15px var(--font-cat-title);
padding: 1px 0px 5px !important;
transition: color var(--anim-hover) !important;
}

.auction-header > div {
background-color: rgb(var(--block-bg-inner));
font-size: 10px;
color: rgb(var(--text-color));
position: relative;
border-radius: 10px;
border: var(--border-thin);
padding: 10px 18px 10px 20px;
}

.auction-header .auction-cont {
margin-top: 22px;
padding: 25px 18px 10px 20px;
}

.auction-cont::before {
content: attr(data-title);
width: fit-content;
top: -14px;
left: 50%;
translate: -50%;
background-color: rgb(var(--block-bg-main));
color: rgba(150, 62, 53, 1);
position: absolute;
font-family: Moisette;
font-weight: 700;
font-size: 11px;
border-radius: 87px;
border: var(--border-thin);
padding: 7px 16px 4px;
z-index: 4;
}

.auction-cont > div {
display: flex;
flex-wrap: wrap;
gap: 22px 12px;
height: 357px;
overflow: auto;
justify-content: flex-start;
padding-right: 3px;
}

.auction-cont .pump {
width: 98px;
height: 98px;
background-color: rgb(var(--block-bg-inner));
color: rgb(var(--text-color));
position: relative;
overflow: visible;
border-radius: 10px;
border: var(--border-thin);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.auction-cont .ticket_1 {
background-position: center;
background-repeat: no-repeat;
}

.auction-cont .ticket_0 {
background-position: 13px -5px;
background-repeat: no-repeat;
}

.auction-cont .pump img {
width: 62px;
height: 70px;
object-fit: contain;
}

.auction-cont .pump span {
position: absolute;
bottom: 6px
}

.auction-cont .pump div.closed,
.auction-cont .pump div.opened {
position: absolute;
top: 0;
padding: 5px;
overflow: auto;
background: rgba(255, 255, 255, .6);
backdrop-filter: blur(5px);
opacity: 0;
transition: .4s ease-in-out;
}

.auction-cont .pump div.opened {
border-radius: 10px;
display: block;
text-transform: lowercase;
text-align: center;
top: 50%;
transform: translateY(-50%);
box-shadow: none !important;
z-index: 48;
font: var(--fw600) 13px var(--font-cat-title);
}

.auction-cont .pump div.closed {
font-size: 9px;
text-align: center;
left: 4px;
width: 94%;
height: 100%;
border-radius: 5px;
z-index:50 ;
}

.auction-cont .pump.ticket_1:hover div.closed,
.auction-cont .pump.ticket_0:hover div.opened {
opacity: 1;
}

.auction-cont .pump span {
width: 98px;
height: 98px;
font-family: Moisette;
font-weight: 600;
font-style: Italic;
font-size: 40px;
line-height: 90%;
text-align: center;
background-color: rgba(150, 62, 53, 1);
color: white;
top: 0px;
border-radius: 10px;
justify-content: center;
align-items: center;
display: none;
}

.auction-cont .pump.ticket_0 span {
display: flex;
}

</style>

<div class='auction-header'>
<div>
<span> рождественская лотерея </span>
<div>
Вы думали, что лотерея с вопросами по матчасти была испытанием? Хихик. Мы тоже так думали... пока не придумали кое-что получше. Добро пожаловать в постовую лотерею, где сам случай выбирает, что произойдёт с вашим персонажем. Правила этого развлечения очень простые:<br><br>

Вы выбираете понравившуюся тыковку — и она выдаёт вам задание, которое нужно выполнить в посте.<br>
После выполнения задания приносите в эту тему ссылку на свой пост и цитату фрагмента с выполненным заданием.<br>
За успешно выполненное задание получаете приз.<br><br>

Один персонаж — одна тыковка. Если у вас есть твинки, можете испытать удачу и с ними — но задание придётся выполнить именно с того профиля, что тянул тыковку.

В Хэллоуин границы между мирами тонки, и тыковки иногда шепчут нечто… по-настоящему мистическое. Тяните свою тыковку и пусть удача будет на вашей стороне.

</div></div>

<div class='auction-cont' data-title='лоты'><div>

<div class='pump ticket_1'>
<img src='https://forumstatic.ru/files/001c/9d/fb/20037.png'>
<div class='closed'>описание айтема Ты будешь вынужден поступать неправедно, куда бы ты ни пошел. Жизнь в том и состоит, чтобы идти против своей природы. Рано или поздно это приходится делать каждому живому существу</div>
<div class='opened'>название айтема</div>
<span>12</span>
</div>

<div class='pump ticket_0'>
<img src='https://forumstatic.ru/files/001c/9d/fb/70817.png'>
<div class='closed'>описание айтема Ты будешь вынужден поступать неправедно, куда бы ты ни пошел. Жизнь в том и состоит, чтобы идти против своей природы. Рано или поздно это приходится делать каждому живому существу</div>
<div class='opened'>название айтема</div>
<span>12</span>
</div>

<div class='pump ticket_1'>
<span> 3 </span>
<img src='https://forumstatic.ru/files/001c/9d/fb/70817.png'>
<div class='closed'>описание айтема Ты будешь вынужден поступать неправедно, куда бы ты ни пошел. Жизнь в том и состоит, чтобы идти против своей природы. Рано или поздно это приходится делать каждому живому существу</div>
<div class='opened'>название айтема</div>
<span>12</span>
</div>

<div class='pump ticket_1'>
<img src='https://forumstatic.ru/files/001c/9d/fb/70817.png'>
<div class='closed'>описание айтема Ты будешь вынужден поступать неправедно, куда бы ты ни пошел. Жизнь в том и состоит, чтобы идти против своей природы. Рано или поздно это приходится делать каждому живому существу</div>
<div class='opened'>название айтема</div>
<span>12</span>
</div>