.entry {
  display: flex;
  flex-direction:column;
  position: relative;
  margin-bottom: 10px;
  width: 100%;
  max-width: 50rem;
  height: 8rem;
  background: black;
  border-radius: 1rem;
  overflow: hidden;
  /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
  font-size: 16px;
  /* --gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff); */
  --gradient: linear-gradient(to bottom, rgb(255, 212, 95), #FFBA00, #574000);
  --color: #FFBA00;
  --transition: 300ms
}

.entry:before {
  position: absolute;
  content: "";
  inset: 0.0625rem;
  border-radius: 0.9375rem;
  background: black;
  z-index: 2
}

.entry:after {
  position: absolute;
  content: "";
  width: 0.25rem;
  inset: 0.65rem auto 0.65rem 0.5rem;
  border-radius: 0.125rem;
  background: var(--gradient);
  transition: transform var(--transition) ease;
  z-index: 4;
}

.entry:hover:after {
  transform: translateX(0.15rem)
}

.entry-title {
  display: flex;
  justify-content:space-between;
  width: 100%;
  color: var(--color);
  padding: 0.65rem 0.25rem 0.4rem 1.4rem;
  font-weight: 500;
  font-size: 1.1rem;
  transition: transform var(--transition) ease;
  z-index: 5;
}

.entry-date {
  color: #F5F5F4;
  font-size: 0.9rem;
  font-style: italic;
}

.entry:hover .entry-title {
  transform: translateX(0.15rem)
}

.entry-body {
  color: #F5F5F4;
  padding: 0 1.25rem;
  padding-left: 3rem;
  transition: transform var(--transition) ease;
  z-index: 5;
}

.entry:hover .entry-body {
  transform: translateX(0.25rem)
}

.entry-glow,
.entry-border-glow {
  position: absolute;
  width: 60rem;
  height: 60rem;
  transform: translate(-25%, -25%);
  background: radial-gradient(circle closest-side at center, white, transparent);
  opacity: 0;
  transition: opacity var(--transition) ease;
}

.entry-glow {
  z-index: 3;
}

.entry-border-glow {
  z-index: 1;
}

.entry:hover .entry-glow {
  opacity: 0.1
}

.entry:hover .entry-border-glow {
  opacity: 0.1
}