:root {
    --section-min-height: 500px;
}

.left-image, .right-image {
    height: 500px;
    object-fit: cover;
}

#contact{
    background-image: url('/images/for-home/contact.jpg');
    color: #ffffff;
}
#contact > div{
    padding: 50px 0;
}

#whats-new h2{
    margin-bottom: calc(var(--space-between-sections) - 30px );
}

@media screen and (min-width: 992px) {
    #contact{
        margin-top: 30px;
    }
}

@media screen and (min-width: 1200px) {
    #contact {
        margin-top: 0;
    }
    #intro .right-image{
        object-position: center;
    }
}

/* Carousel */
#forHomeProducts{
    padding-top: unset;
}
#forHomeProducts .card-block__title{
    font-size: 16px;
    text-decoration: none;
    text-align: center;
}

#forHomeProducts .card-block {
    grid-row: span 2;
    justify-items: center;
    text-decoration: none;
    color: #10218b;
    row-gap: 5px;
    padding-block: 15px;
}

#forHomeProducts .card-block:hover{
    color: rgb(0, 0, 0);
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(223,226,231,1) 70%, rgba(209,214,218,.4) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(223,226,231,1) 70%, rgba(209,214,218,.4) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(223, 226, 231, .2) 70%, rgb(209 214 218 / 10%) 100%);
}

@media screen and (min-width: 992px) {
    #forHomeProducts-list{
        justify-content: center;
        grid-template-columns: repeat(3, 320px);
        column-gap: 0;
    }
}

@media screen and (max-width: 991px) {
    #forHomeProducts{
        margin-bottom: 50px;
    }
}