.category,
.box
  background: white
  padding: 1em
  border: 2px solid darken($grey-light, 5)
  border-radius: 4px
  margin-bottom: 1em
  break-inside: avoid
  display: inline-block
  width: 100%

  h2,
  .box-title
    border-bottom: 1px solid darken($grey-light, 5)
    padding-bottom: 0.4em

  .box-noborder
    border: none
    padding-bottom: 0
    margin-bottom: 0

  .border
    padding-bottom: 0.4em
    margin-top: 0
    border-bottom: 1px solid darken($grey-light, 5)

  a:not([class^="icon"])
    @extend %anchor

.conf-title
  white-space: nowrap
  overflow: hidden

.detail-pair
  font-weight: 300
  font-size: 18px
  color: #232323
  margin-top: 20px

.detail-pair > strong
  display: block
  font-weight: 600
  font-size: 14px

.category,
.box
  background: white
  padding: 1em
  border: 2px solid darken($grey-light, 5)
  border-radius: 4px
  margin-bottom: 1em
  break-inside: avoid
  display: inline-block
  width: 100%

  h2,
  .box-title
    border-bottom: 1px solid darken($grey-light, 5)
    padding-bottom: 0.4em

  .box-noborder
    border: none
    padding-bottom: 0
    margin-bottom: 0

  .border
    padding-bottom: 0.4em
    margin-top: 0
    border-bottom: 1px solid darken($grey-light, 5)

  a:not([class^="icon"])
    @extend %anchor

.conf-title
  white-space: nowrap
  overflow: hidden

.detail-pair
  font-weight: 300
  font-size: 18px
  color: #232323
  margin-top: 20px
  word-break: break-all

.detail-pair > strong
  display: block
  font-weight: 600
  font-size: 14px

Break words in detail-pair to prevent overflow
Break words in detail-pair to prevent overflow
