// layout
.l-container
  width: 85.7142857143%
  max-width: 1680px
  margin: 0 auto

// template / template overrides
.t-nieuwbouw__intro
  padding-bottom: 40px

  // organisms
.o-vlog
  padding-top: 40px
  padding-bottom: 40px
  background-color: $brightBlue
  color: white

.o-vlog--white
  background-color: white
  color: #737373

.o-vlog__content
  display: grid
  gap: 32px
  grid-template-columns: 65fr 85fr

  +respond-to-width(900)
    grid-template-columns: 1fr

.o-vlog__content--single-column
  grid-template-columns: 1fr


.o-vlog__content--reversed
  grid-template-columns: 85fr 65fr

.o-vlog__text
  grid-row: 1
  grid-column: 2
  .o-vlog__content--reversed &
    grid-column: 1


.o-vlog__video
  grid-row: 1
  width: 100%
  aspect-ratio: 16 / 9

  +respond-to-width(900)
    grid-row: 2

  .o-vlog__content--reversed &
    grid-column: 2

.o-construction-steps
  width: 100%

//.o-construction-steps__list
//  display: grid
//  grid-template-columns: repeat(6, 1fr)
//  margin: 0
//
//  +respond-to-width(1600)
//    grid-template-columns: repeat(3, 1fr)
//
//  +respond-to-width(900)
//    grid-template-columns: repeat(2, 1fr)
//
//  +respond-to-width(600)
//    grid-template-columns: repeat(1, 1fr)
//
//
//.o-construction-steps__list-item
//  display: grid
//  grid-template-rows: 60px auto
//
//.o-construction-steps__step-name
//  position: relative
//
//  display: flex
//  justify-content: center
//  align-items: center
//
//  text-transform: uppercase
//  font-size: 16px
//  font-weight: bold
//
//  color: white
//  background-color: #78a1b5
//
//  &.has-arrow
//    &:after
//      position: absolute
//      right: 16px
//      transform: translateX(50%)
//      z-index: 1
//      content: url("/img/nieuwbouw/progress-arrow.svg")
//
//.o-construction-steps__images
//  display: grid
//  grid-template-rows: 200px 110px
//  column-gap: 8px
//  background-color: #d1dee6
//  width: 100%
//
//  img
//    max-width: 100%
//    max-height: 100%
//    object-fit: contain
//
//.o-construction-steps__images-top
//  display: flex
//  justify-content: center
//  background-color: #afc5d3
//  padding: 8px
//
//.o-construction-steps__images-bottom
//  display: flex
//  justify-content: center
//  align-content: center
//  padding: 8px
//  gap: 8px
//  overflow: clip