<h1>Events 2022</h1>
<ul>
  <li>
    <time datetime="2022-03-04">
      MAR
      <span class="event-day">4</span>
    </time>
    <div>
      <div class="type-of-event">Concert</div>
      <div>Vetusta Morla, Brussels</div>
    </div>
  </li>
  <li>
    <time datetime="2022-05-01">
      MAY
      <span class="event-day">1</span>
    </time>
    <div>
      <div class="type-of-event">Demo</div>
      <div>Labor Day, Vienna</div>
    </div>
  </li>
  <li>
    <time datetime="2022-07-08">
      JUL
      <span class="event-day">8</span>
    </time>
    <div>
      <div class="type-of-event">Release</div>
      <div>Thor: Love and Thunder</div>
    </div>
  </li>
</ul>

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0 1rem;
}

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-st. 0yle: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f2bab2;
  border-radius: 4px;
  padding: 0.5rem;
}

time {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border: 1px solid black;
  box-shadow: 4px 4px 5px -3px rgba(0,0,0,0.75);
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  width: 2rem;
}

time .event-day {
  color: darkred;
  font-size: 2rem;
  font-weight: bolder;
}

.type-of-event {
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.3em;
}