Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="main"><img src="http://placehold.it/818x770"></div>
  
  <div class="sub">
    <div><img src="http://placehold.it/400x380"></div>
    <div><img src="http://placehold.it/400x380"></div>
    <div><img src="http://placehold.it/400x380"></div>
  </div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

.container {
  margin: 0 auto;
  overflow: hidden;
  line-height: 0;
  width: 40%;
  position: relative;
}

.main {
  width: 75%;
  float: left;
  
  img { width: 100%; }
}

.sub {
  width: calc(25% - 10px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  
  > div {
    height: 33.3%;
    position: relative;
    
    img {
      max-width: 100%;
      max-height: 100%;
    }
    
    &:nth-child(2) img {
      position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    &:nth-child(3) img {
      position: absolute;
      bottom: 0;
    }
  }
}

SassMeister-output.css

.container {
  margin: 0 auto;
  overflow: hidden;
  line-height: 0;
  width: 40%;
  position: relative;
}

.main {
  width: 75%;
  float: left;
}

.main img {
  width: 100%;
}

.sub {
  width: calc(25% - 10px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.sub > div {
  height: 33.3%;
  position: relative;
}

.sub > div img {
  max-width: 100%;
  max-height: 100%;
}

.sub > div:nth-child(2) img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sub > div:nth-child(3) img {
  position: absolute;
  bottom: 0;
}

SassMeister-rendered.html

<div class="container">
  <div class="main"><img src="http://placehold.it/818x770"></div>
  
  <div class="sub">
    <div><img src="http://placehold.it/400x380"></div>
    <div><img src="http://placehold.it/400x380"></div>
    <div><img src="http://placehold.it/400x380"></div>
  </div>
</div>