Верстка футера с градиентом

Необходимо сверстать такой вот футер.

На данный момент я начинающий верстальщик, и не представляю, каким образом сделать подобного рода градиент(линейный ли, или радиусом?), при этом имея подобную прозрачность на фоне. Закрыл красными квадратами ненужную информацию, чтобы глаза не мозолила.

Все что у меня на данный момент получилось:

<div class = "footer">
</div>

CSS(размеры для наглядности):

.footer{
    margin-left: 100px;
    width: 1230px;
    line-height: 200px;
    height: 300px;
  transform: skew(20deg);
    background: linear-gradient(#3d6f68 30%, #302c20 70%);
}

еще был бы очень признателен за подсказку, как лучше реализовать параллелограммы (пробки\карты) в этом блоке с подобными визуальными отступами.