Generated by SassMeister.com.

SassMeister-input-HTML.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<section class='display-pane-container'>
  <div class='media' style='max-width:700px;max-height:1200px;'>
    <div class='photo'>
      <img src='http://placecage.com/700/1200' class='player-photo' />
    </div>
    <div class='photo ng-hide'>
      <img src='http://placecage.com/1200/700' class='player-photo' />
    </div>
    <div class='left-control'>
      <span class='fa fa-arrow-circle-o-left fa-3x'></span>
    </div>
    <div class='right-control'>
      <span class='fa fa-arrow-circle-o-right fa-3x'></span>
    </div>
  </div>
</section>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "bourbon/bourbon";
@import "breakpoint";
@import "susy";
.ng-hide {
  display: none;
}
.display-pane-container {
  @include container;
  .media {
    position: relative;
    @include span(12 of 12);
    text-align:center;
    max-width: 1200px;
    max-height: 800px;
    img {
      max-width:100%;
    }
  }
  .left-control, .right-control {
    position: absolute;
    top: 50%;
    color: white;
  }
  .right-control {
    right: 0;
  }
}

SassMeister-output.css

.ng-hide {
  display: none;
}

.display-pane-container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.display-pane-container:after {
  content: " ";
  display: block;
  clear: both;
}

.display-pane-container .media {
  position: relative;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  max-width: 1200px;
  max-height: 800px;
}

.display-pane-container .media img {
  max-width: 100%;
}

.display-pane-container .left-control, .display-pane-container .right-control {
  position: absolute;
  top: 50%;
  color: white;
}

.display-pane-container .right-control {
  right: 0;
}

SassMeister-rendered.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<section class='display-pane-container'>
  <div class='media' style='max-width:700px;max-height:1200px;'>
    <div class='photo'>
      <img src='http://placecage.com/700/1200' class='player-photo' />
    </div>
    <div class='photo ng-hide'>
      <img src='http://placecage.com/1200/700' class='player-photo' />
    </div>
    <div class='left-control'>
      <span class='fa fa-arrow-circle-o-left fa-3x'></span>
    </div>
    <div class='right-control'>
      <span class='fa fa-arrow-circle-o-right fa-3x'></span>
    </div>
  </div>
</section>