[html]<style>
lotterycont {
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;
}

lotterycont::before {
    content: 'LOTTERY';
    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);
}

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

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

.lotterycard_1 {
    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;
  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
}

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

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

.lotterycard_1:hover .lottery-number {
opacity: 1;
}

.lotterycard_1 span {
    display: block;
    opacity: 1;
    font-size: 30px;
    font-family: 'Mulish';
    font-weight: 900;
    color: #747373;
    background: #ffffff;
    border-radius: 10px;
    padding: 0 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>

<lotterycont>
<img  src=https://contentful.harrypotter.com/usf1vwtuqyxm/FguKzCQXYbXvJMS27FKqZ/5a936f1febc6e5767626c1831ded406a/USH_Hogwarts2_VB.jpg />

<div class='lotterycard_1'>
<span class="lottery-number">1</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">2</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">3</span>
</div>

<div class='lotterycard_0'>
<span class="lottery-number">4</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">5</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">6</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">7</span>
</div>

<div class='lotterycard_0'>
<span class="lottery-number">8</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">9</span>
</div>

<div class='lotterycard_0'>
<span class="lottery-number">10</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">11</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">12</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">13</span>
</div>

<div class='lotterycard_0'>
<span class="lottery-number">14</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">15</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">16</span>
</div>

<div class='lotterycard_1'>
<span class="lottery-number">17</span>
</div>

</lotterycont>

[/html]

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