Großes Datum

.card-056 {
  display: flex;
  width: 360px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #111827;
  transition: box-shadow .2s
}
.card-056:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08)
}
.card-056__date {
  flex: 0 0 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff7ed;
  border-right: 1px solid #fed7aa;
  color: #c2410c
}
.card-056__date b {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em
}
.card-056__date span {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em
}
.card-056__body {
  padding: 18px 20px
}
.card-056 h3 {
  margin: 0 0 4px;
  font-size: 17px
}
.card-056 p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #6b7280
}
.card-056 a {
  font-size: 13px;
  font-weight: 700;
  color: #c2410c;
  text-decoration: none
}
.card-056 a:hover {
  text-decoration: underline
}
.card-056 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

<article class="card-056">
  <div class="card-056__date"><b>24</b><span>Oct</span></div>
  <div class="card-056__body">
    <h3>Design systems meetup</h3>
    <p>18:30 · Kreuzberg, Berlin</p>
    <a href="#">Save my seat</a>
  </div>
</article>