.img-main {
    background-color: #394859;
    background-image: url('images/img-main.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

@media (max-width: 770px) {
    .img-main {
       background-image: linear-gradient( 90deg, #682ff4b2 0%, #6b32e296 50%), url(images/img-main.jpg);
  
    }
}



.grid-square {
    background-image: url('images/grid-square.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    height: 150px;
}

.bg-coal {
    background-image: url('images/coal.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    width: 100px;
    height: 150px;
}

.bg-gold {
    background-image: url('images/gold.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    width: 100px;
    height: 150px;
}

.bg-sand {
    background-image: url('images/sand.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    width: 100px;
    height: 150px;
}