Modulos responsivo (Fórum iMasters)

HTML

<div class="conteudo">

  <div class="pizza1">
    <a href="#"><img src="http://clickmaujor.com/foruns/pizza1.jpg" >      </a>
    <a href="#"><button>PEDIR</button></a>
  </div>
  
  <div class="pizza2">
    <a href="#"><img src="http://clickmaujor.com/foruns/pizza2.jpg"/>       </a>
    <a href="#"><button>PEDIR</button></a>
  </div>

</div>

CSS

body {
  margin: 0;
}
.conteudo {
  box-sizing: border-box;
  width: 100%;
  max-width: 1170px;
  padding: 10px 10px 40px 10px;
  background: #a10506;
  overflow: auto;
}

.pizza1 img,
.pizza2 img {
  width: 100%;
  height: auto;
}

.pizza1 {
  position: relative;
  width: 47.5%;
  float: left;
}

.pizza2 {
  position: relative;
  width: 47.5%;
  float: right;
}

button {
  position: absolute;
  right: 0;
  bottom: 4px;
  background: green;
  color: white;
  width: 35.3%;
  padding: 3%;
  border: none;
}

@media all and (max-width: 600px) {
  .pizza1,
  .pizza2 {
    width: 100%;
    float: none;
  }
}