.bd-main
  overflow: hidden
  position: relative

// Lead

.bd-lead
  // border: 1px solid lightskyblue
  position: relative

.bd-breadcrumb
  display: flex
  justify-content: space-between
  margin-bottom: 2.5rem
  .breadcrumb:not(:last-child)
    margin-bottom: 0

.bd-prev-next
  align-items: flex-start
  color: $grey-light
  display: none
  flex-grow: 0
  flex-shrink: 0
  margin-left: 0.5rem
  text-align: center
  a,
  span
    border-radius: $radius
    width: 1.5rem
  a
    &:hover
      background-color: $background

.bd-header
  margin-bottom: 2.5rem
  .subtitle
    color: $text-light
    strong
      color: currentColor

// Side

.bd-side,
.bd-side-background
  background-color: $white-bis
  // border: 1px solid coral

.bd-side
  position: relative

.bd-side-background
  bottom: 0
  left: 50%
  position: absolute
  right: 0
  top: 0

+touch
  .bd-lead,
  .bd-side
    padding: 1.5rem

+mobile
  .bd-side-background
    display: none

+tablet
  .bd-duo
    display: flex
  .bd-lead
    background-color: $white
    overflow: hidden
    flex-grow: 1
    flex-shrink: 1
  .bd-prev-next
    display: flex
  .bd-side
    flex: 0 0 300px

+desktop
  .bd-main
    padding: 0 3rem
  .bd-lead
    padding: 3rem 3rem 3rem 0
  .bd-side
    padding: 3rem 0 3rem 1.5rem