- 
  const CASES = [
    {
      title: 'Microservices Orchestration',
      blurb: 'Temporal is a perfect fit for orchestrating microservices.'
    },
    {
      title: 'Financial Transactions',
      blurb: 'For software that interacts with money (especially someone else\'s), reliability and consistency are top priorities.'
    },
    {
      title: 'Resource Provisioning',
      blurb: 'Provisioning resources depends on a series of potentially long-running operations with many possibilities for intermittent failures.'
    },
    {
      title: 'Monitoring',
      blurb: 'Temporal provides guaranteed execution with exactly-once semantics with automatic retries.'
    },
  ]
  
.grid.gap-6.grid-cols-2
  - for (const item of CASES)
    .grid__item.item.w-56.text-white.relative
      .item__content.h-full.w-full.p-4.bg-black.relative.border-2.flex.flex-col
        .font-bold.mb-2= item.title
        p.flex-grow.mb-2=item.blurb
        a(href="#") Learn More

*
  box-sizing border-box
  
body
  min-height 100vh
  display grid
  place-items center
  background hsl(0, 0%, 10%)
  
.item:hover
  --expand 1
  
.item:before
.item:after
  content ''
  position absolute
  height 100%
  width 100%
  background hsl(0, 0%, 5%)
  border 2px solid white
  top 0
  left 0
  z-index -1
  
.item:after
  transform translate(calc(var(--expand) * -2%), calc(var(--expand) * -2%))
  transition transform 0.2s
  
.item__content
  transition transform 0.2s
  transform translate(calc(var(--expand) * -4%), calc(var(--expand) * -4%))

a
  color #C7EDEF