Утопить слайды с уменьшением

Вот макет

Вот что получается

Вот HTML

<div class="slider">
    <div class="slide">
        <a href="#" class="thumb_1"></a>
    </div>
    <div class="slide">
        <a href="#" class="thumb_1"></a>
    </div>
    <div class="slide">
        <a href="#" class="thumb_1"></a>
    </div>
    <div class="slide">
        <a href="#" class="thumb_1"></a>
    </div>
    <div class="slide">
        <a href="#" class="thumb_1"></a>
    </div>
</div>

Вот CSS

.thumb_1 {
    display: block;
    width: 100%;
    max-width: 352px;
    margin: 20px;
    position: relative;
    background: #FFF;
    border: 2px solid #367FD3;
    border-radius: 10px;
}

Не получается утопить слайды как на макете. Как можно это сделать?