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:1200px;'>
    <div class='photo'>
      <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>
<hr />
<section class='display-pane-container'>
  <div class='media' style='max-width:700px'>
    <div class='photo'>
      <img src='http://placecage.com/700/1200' 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";
$mobile: max-width 640px;
.display-pane-container {
  @include container;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .media {
    position: relative;
    @include span(12 of 12);
    text-align:center;
    max-width: 1200px;
    max-height: 800px;
    img {
      max-width:100%;
    }
    @include breakpoint($mobile) {
      max-height: 260px;
      img {
        max-height: 260px;
      }
    }
  }
  .left-control, .right-control {
    opacity: 0.8;
    position: absolute;
    top: 50%;
    color: white;
    @include breakpoint($mobile) {
      color :red;
    }
  }
  .left-control {
    left: 2%;
  }
  .right-control {
    right: 2%;
  }
}

SassMeister-output.css

.display-pane-container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.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%;
}

@media (max-width: 640px) {
  .display-pane-container .media {
    max-height: 260px;
  }
  .display-pane-container .media img {
    max-height: 260px;
  }
}

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

@media (max-width: 640px) {
  .display-pane-container .left-control, .display-pane-container .right-control {
    color: red;
  }
}

.display-pane-container .left-control {
  left: 2%;
}

.display-pane-container .right-control {
  right: 2%;
}

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:1200px;'>
    <div class='photo'>
      <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>
<hr />
<section class='display-pane-container'>
  <div class='media' style='max-width:700px'>
    <div class='photo'>
      <img src='http://placecage.com/700/1200' 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>