CSS block element blurred background

background.pug

.wrapper.card1
  .title Quia voluptas voluptatem sit
  .text Ea eius cum dolor facere sequi. Veritatis architecto fugiat rerum maxime. Cupiditate facere explicabo corrupti. Aliquid voluptas vel sequi fugiat adipisci sit ut
  
.wrapper.card2
  .title Sint eveniet repellendus fuga
  .text Eveniet animi neque ipsum nihil rerum laboriosam. Quod fugiat quis inventore laudantium qui doloremque. Ea et autem sed

background.styl

body
  padding 1rem

card()
  border 2px solid grey
  box-shadow 0 1rem 1rem 1rem #DDD
  border-radius .25rem
  padding 1.5rem
  color white
  margin-bottom 3rem
  text-align center

.wrapper
  card()
  .title
    font-size 2rem
    margin-bottom 1.5rem

background(imgurl)
  position relative
  overflow hidden
  &::before
    content ''
    z-index -1
    position absolute
    width 100%
    height 100%
    left 0
    top 0
    background-image url(imgurl)
    background-size cover
    background-position center center
    filter blur(.5rem)
    transform scale(1.2)

.card1
  background("https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1055&q=80")
.card2
  background("https://images.unsplash.com/photo-1445962125599-30f582ac21f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80")