<div id="examples">
<h2>ПРИМЕРЫ РАБОТ</h2>
<div class="wrapper"><div class="before"><img src="https://www.remontmacbook.ru/wp-content/uploads/2017/07/i1.jpg"><p>ДО</p></div>
<div class="arrow"><img src="https://www.remontmacbook.ru/wp-content/uploads/new/arrows.png"></div>
<div class="after"><img src="https://www.remontmacbook.ru/wp-content/uploads/2017/07/i3.jpg"><p>ПОСЛЕ</p></div>
</div>
</div>

div#examples .wrapper {
    max-width: 948px;
    margin: 0 auto;
    float: none;
    overflow: hidden;
}
div#examples div {
    float: left;
}
#examples .before img {
    min-height: 291px;
}
div#examples div p {
    text-align: center;
    margin-top: 35px;
    color: #fff;
    font-size: 24px;
}
div#examples .arrow {
    margin: 113px 30px 113px 30px;
}

@media (max-width: 480px)
div#examples .wrapper {
    max-width: 500px;
}
@media (max-width: 480px)
div#examples div {
    float: none;
}
@media (max-width: 480px)
#examples .after img, #examples .before img {
    width: 100%;
    min-height: 272px;
}
@media (max-width: 480px)
div#examples div p {
    margin-top: 15px;
    font-size: 20px;
}
@media (max-width: 480px)
div#examples .arrow {
    margin: 0 auto;
    max-width: 27px;
    float: none;
}
@media (max-width: 480px)
.arrow img {
    transform: rotate(90deg);
}