@import "@fancyapps/fancybox/dist/jquery.fancybox.min"

.promethee
  &__component
    &__cover
      min-height: 300px
      padding: 150px 30px
      text-align: center
      display: flex
      justify-content: center
      flex-direction: column
      background-repeat: no-repeat
      background-position: center center
      background-size: cover
      margin-bottom: 50px

    &__page > &__aside,
    &__page > &__text,
    &__page > &__faq,
    &__page > &__table,
    &__page > &__video
      @extend .container
      margin-bottom: 50px
      padding-left: $grid-gutter-width/2
      padding-right: $grid-gutter-width/2

    &__page > &__collection,
    &__page > &__row
      @extend .container
      padding-right: 0
      padding-left: 0
      margin-bottom: 50px

    &__slider
      .promethee__component
        margin-bottom: 0
      .fontawesome-carousel-control .fa
        top: 50%
        position: absolute
        transform: translateY(-50%)
        font-size: 30px

    &__collection
      margin-top: 20px
      margin-bottom: 20px
      .clearfix
        margin: 40px 0

    &__faq
      h4
        cursor: pointer
        position: relative
        &::after
          content: ""
          display: block
          width: 8px
          height: 8px
          border-right: 2px solid #000
          border-top: 2px solid #000
          transform: rotate(135deg)
          position: absolute
          right: 10px
          top: 5px
          transition: transform .4s ease
        &[aria-expanded="true"]
          &::after
            transform: rotate(315deg)
      img
        margin-bottom: 30px

    &__aside
      .aside__button
        padding-top: 30px
        a
          display: inline-block
        &--center
          text-align: center
        &--left
          text-align: left
        &--right
          text-align: right

    &__blockquote
      .blockquote
        font-size: 30px
        border: none

        &::before, &::after, & > p
          display: inline-block

        &::before
          content: '« '

        &::after
          content: ' »'

      .author
        font-size: 14px
        font-style: italic

    &__collection
      .collection-item__content
        margin-bottom: $grid-gutter-width

    &__slider
      .carousel-item__content
        text-align: center

@media print
  body
    font-size: 125%
  .promethee
    &__component
      &__page > &__aside,
      &__page > &__text,
      &__page > &__faq,
      &__page > &__table,
      &__page > &__video,
      &__page > &__collection,
      &__page > &__row
        max-width: 90% !important
  .container
    max-width: 90% !important