FriendPub {
  display: grid
  grid-gap: 1rem

  div.description {}

  --range-options: 4
  --cols: calc(2 * var(--range-options))

  div.slider {
    display: grid
    grid-template-columns: repeat(var(--cols), 1fr)

    datalist {
      grid-row: 1
      grid-column: 1 / calc(var(--cols) + 1)

      display: grid
      grid-template-columns: 1fr 1fr 1fr 1fr
      justify-items: center
    }

    input[type=range] {
      grid-row: 2
      grid-column: 2 / var(--cols)

      margin-left: 0
    }
  }

  div.alert {
    padding: .5rem
    background: #fdbdfd
  }

  div.Pubs {
    div.description {
      margin-bottom: .5rem
  
    }
  }
}