.multiple-images
  padding-bottom: 45px
  .content-container
    position: relative

    &.main66
      .main-image
        width: calc(100% / 3 * 2 - 15px)
        .medium
          display: none
      .sub-images
        width: calc(100% / 3 - 15px)
        img.large
          display: none

    &.main50
      .main-image
        width: calc(100% / 2 - 15px)
        .medium
          display: none
      .sub-images
        width: calc(100% / 2 - 15px)
        img.medium
          display: none

    &.main33
      .main-image
        width: calc(100% / 3 - 15px)
        .large
          display: none
      .sub-images
        width: calc(100% / 3 * 2 - 15px)
        img.medium
          display: none

    img
      width: 100%
      display: block
    .main-image
      height: calc(100%)

      .responsive
        display: none

      &.left
        +position(absolute, 0 null 0 0)

      &.right
        +position(absolute, 0 0 0 null)

      >div:not(.window-bar)
        position: absolute
        //height: calc(100% - 40px)
        height: 100%
        width: 100%
        background-size: cover
        background-position: 50% 50%

    .sub-images
      float: right

      &.right
        float: left
        padding-left: 0

      .half:nth-child(2)
        margin-top: 30px

+media-query(850px)
  .multiple-images
    .content-container.main66, .content-container.main33
      .main-image, .sub-images
        width: 100%
      .main-image
        position: relative
        margin-bottom: 30px
        div:not(.window-bar, .buttons)
          display: none

        .responsive
          display: block
          margin-bottom: 30px
          &.medium
            display: none

      .sub-images
        img.medium
          display: none
        img.large
          display: block

+media-query(650px)
  .multiple-images
    .content-container.main50
      .main-image, .sub-images
        width: 100%
      .main-image
        position: relative
        margin-bottom: 30px
        div:not(.window-bar, .buttons)
          display: none

        .responsive
          display: block
          margin-bottom: 30px
          &.medium
            display: none

      .sub-images
        img.medium
          display: none
        img.large
          display: block

+media-query(500px)
  .multiple-images
    .content-container.main33, .content-container.main50, .content-container.main66
      .main-image
        .responsive
          &.medium
            display: block
          &.large
            display: none

      .sub-images
        img.medium
          display: block
        img.large
          display: none