SCSS

HTML

<div class="gallery">
  <ul>
    <li class="image-container">
        <img src="https://www.bhg.com/thmb/0Fg0imFSA6HVZMS2DFWPvjbYDoQ=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/white-modern-house-curved-patio-archway-c0a4a3b3-aa51b24d14d0464ea15d36e05aa85ac9.jpg" />
      </li>
    <li class="image-container">
        <img src="https://www.bhg.com/thmb/0Fg0imFSA6HVZMS2DFWPvjbYDoQ=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/white-modern-house-curved-patio-archway-c0a4a3b3-aa51b24d14d0464ea15d36e05aa85ac9.jpg" />
      </li>
          <li class="image-container">
        <img src="https://www.bhg.com/thmb/0Fg0imFSA6HVZMS2DFWPvjbYDoQ=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/white-modern-house-curved-patio-archway-c0a4a3b3-aa51b24d14d0464ea15d36e05aa85ac9.jpg" />
      </li>
          <li class="image-container">
        <img src="https://www.bhg.com/thmb/0Fg0imFSA6HVZMS2DFWPvjbYDoQ=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/white-modern-house-curved-patio-archway-c0a4a3b3-aa51b24d14d0464ea15d36e05aa85ac9.jpg" />
      </li>
          <li class="image-container">
        <img src="https://www.bhg.com/thmb/0Fg0imFSA6HVZMS2DFWPvjbYDoQ=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/white-modern-house-curved-patio-archway-c0a4a3b3-aa51b24d14d0464ea15d36e05aa85ac9.jpg" />
      </li>
</div>

SCSS

.gallery {
    width: 100%;
    max-width: 1080px;
    margin: 0px auto;
    padding: 0;
}

img {
  width: 100%;
  height: 100%;
}

ul {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li:first-child{
  width: 50%;
} 

li:not(:first-child)  {
  width: 25%;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  
}