﻿.list-module {
    position: relative;
    background-image: url('/Content/MERIX/Images/list-bg.svg');
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

    .list-module .list-title {
        color: black;
        font-family: DINMedium;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
    }

    .list-module .list-p {
        color: black;
        font-family: DINRegular;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        margin-bottom: 20px;
    }

    .list-module .list-item {
        display: flex;
        max-width: 600px;
        padding: 20px;
        align-items: flex-start;
        gap: 20px;
        flex-shrink: 0;
        border-radius: 25px;
        background: white;
        box-shadow: -2px 1px 4px 0 rgba(0, 0, 0, 0.25), 4px 1px 4px 0 #D9D9D6;
        margin-bottom: 20px;
    }

        .list-module .list-item:hover {
            box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.14), 0 6px 30px 0 rgba(0, 0, 0, 0.12), 0 8px 10px 0 rgba(27, 1, 19, 0.11);
        }

.list-module .list-module-item {
    display: grid; 
    grid-template-columns: .25fr 1fr;
    align-items: center;
    gap: 40px;

}

.list-module-img {
    width: 100%;
    margin-bottom: 20px;
    max-width: 598px;
}

    .list-module .list-module-container {
        display: flex;
        justify-content: center;
    }

.list-module-arrow {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.list-item:hover .list-module-arrow {
    opacity: 1;
}


@media only screen and (max-width: 980px) {
    .list-module {
        background-image: url('/Content/MERIX/Images/list-bg-mobile.svg');
    }

        .list-module .list-title {
            font-size: 20px;
        }

        .list-module .list-p {
            color: black;
            font-family: DINRegular;
            font-size: 16px;
        }

        .list-module .list-item {
            gap: 5px;
        }

    .list-module-arrow {
        opacity: 1;
    }
}