[html]<style>
tarotcont {
top: 20px;
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
gap: 20px;
position: relative;
padding: 10px;
    padding-left: 80px;
    box-sizing: border-box;
border-radius: 15px;
background: url(https://i.imgur.com/E9WqZ3i.jpeg) top no-repeat, #d2d2d2;
background-size: 100%;
border: 2px solid #949596;
    margin-bottom: 40px !important;
}

tarotcont::before {
    content: 'TAROT COLLECTION';
    position: absolute;
    font-weight: 900;
    font-size: 50px;
    display: block;
top: -42px;
    color: #949596;
    right: 30px;
    overflow: hidden;
    z-index: 0;
    clip-path: inset(0 0 35% 0);
}

tarotcont::after {
    content: 'choose yours';
    height: fit-content;
    width: fit-content;
    font: 700 26px verdana;
    padding: 10px 20px;
    background: rgb(255 255 255 / 42%);
    position: absolute;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
    left: -110px;
    top: 110px;
    color: #444444;
    border-radius: 0px 14px 0px 14px;
    transform: rotate(90deg);
}

tarotcont > img  {
height: 100%;
width: 70px;
position: absolute;
background-size-x: 100%;
left: 0px;
top: 0px;
object-fit: cover;
border-radius: 13px 0 0 13px;
filter: brightness(1.3) grayscale(.5) contrast(.5);
}

tarotcont .lotterycard_1 {
    width: fit-content;
    height: 190px;
position: relative;
background-size: 100%;
display: flex;
    justify-content: center;
    align-items: center;
  transform-style: preserve-3d;
  will-change: transform;
  transform: scale(0.9);
  transition: transform 0.3s ease, filter 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform, filter;
  cursor:pointer;
image-rendering: crisp-edges
}

tarotcont .lotterycard_0 {
    width: 90px;
    height: 90px;
position: relative;
background: url(https://i.imgur.com/4UrnUJK.png) no-repeat;
background-size: 100%;
display: flex;
    justify-content: center;
    align-items: center;
filter: grayscale(1) opacity(.5);
  transform: scale(0.9);
}

tarotcont .lotterycard_1 .lottery-number {
opacity: 0;
transition: .4s ease-in-out;
}

tarotcont > div:first-of-type {
display: block;
    width: 100%;
    background: white;
    padding: 10px 20px;
    border-radius: 13px;
}

tarotcont .lotterycard_1:hover span {
opacity: 1;
}

.lotterycard_1 span {
    position: absolute;
    width: 70%;
    display: block;
    padding: 5px;
    opacity: 0;
    font-size: 10px;
    line-height: 120%;
    font-family: 'Mulish';
    font-weight: 500;
    color: #ffffff;
    transition: opacity 0.4s ease-in-out;
    text-align: center;
    background: #ffffff1f;
    border-radius: 10px;
    padding: 5px 10px;
    backdrop-filter: blur(7px);
}

.lotterycard_0 .lottery-number{
    display: block;
    opacity: 1;
    font-size: 30px;
    font-weight: 900;
    color: black;
    text-shadow: 0 0 5px white;
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
    will-change: transform;
    cursor: pointer;
    background: #ffffffd1;
    border-radius: 10px;
    padding: 0 10px;
    backdrop-filter: blur(7px);

}

</style>

<tarotcont>

<div> тест про таро любого толка и длины </div>

<img  src=https://www.lunaamatores.co.uk/cdn/shop/files/55352D2C-A03F-47D3-AFA5-6432D8266CBF_1024x1024_2x_92111edf-3446-45d3-ae07-19c4ad61c760.webp?v=1709502899&width=1445 />

<div class='lotterycard_1'>
<img src='https://forumstatic.ru/files/001c/69/a5/46938.png' />
<span>Длинный текст для описания карты таро. Какие-то особенности получения или прост её суть и вкус.</span>
</div>

<div class='lotterycard_1'>
<img src='https://forumstatic.ru/files/001c/69/a5/46938.png' />
<span>Не такой длинный текст для описания карты таро.</span>
</div>

<div class='lotterycard_1'>
<img src='https://forumstatic.ru/files/001c/69/a5/46938.png' />
<span>Длинный текст для описания карты таро. Какие-то особенности получения или прост её суть и вкус.</span>
</div>

<div class='lotterycard_1'>
<img src='https://forumstatic.ru/files/001c/69/a5/46938.png' />
<span>Длинный текст для описания карты таро. Какие-то особенности получения или прост её суть и вкус.</span>
</div>

<div class='lotterycard_1'>
<img src='https://forumstatic.ru/files/001c/69/a5/46938.png' />
<span>Длинный текст для описания карты таро. Какие-то особенности получения или прост её суть и вкус.</span>
</div>

<div class='lotterycard_1'>
<img src='https://forumstatic.ru/files/001c/69/a5/46938.png' />
<span>Длинный текст для описания карты таро. Какие-то особенности получения или прост её суть и вкус.</span>
</div>

<div class='lotterycard_1'>
<img src='https://forumstatic.ru/files/001c/69/a5/46938.png' />
<span>Длинный текст для описания карты таро. Какие-то особенности получения или прост её суть и вкус.</span>
</div>

<div class='lotterycard_1'>
<img src='https://forumstatic.ru/files/001c/69/a5/46938.png' />
<span>Длинный текст для описания карты таро. Какие-то особенности получения или прост её суть и вкус.</span>
</div>

</tarotcont>

[/html]

Работоспособность полная, а вот дизайн нет, я завтра доработаю.