.nps-suppliers-loop-grid {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;

    .supplier-grid-item {
        display: flex;
        flex-direction: row;
        gap: 20px;
        background: #FFFFFF;
        padding: 18px;
        border: 1px solid #FFFFFF;
        border-radius: 4px;
    }

    .supplier-grid-item:hover {
        background: #FBFBFB;
        border: 1px solid #27C05D;
        transition: 500ms;
        box-shadow: 5px 0px 18px -6px #9FE87033;

        .supplier-product-count {
            border: 1px solid #27C05D;
            transition: 500ms;
        }
    }

    .left-container {
        width: 45px;
    }

    img {
        width: 45px;
    }

    .right-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: space-between;
    }

    .top-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .supplier-name {
        color: #284633;
        font-size: 22px;
        font-weight: 500;
        margin-bottom: 0px;
        line-height: 30px;
        overflow: hidden;
        display: -webkit-box; 
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .supplier-address-container {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;

        .supplier-address {
            color: #54695B;
            font-size: 12px;
            font-weight: 400;
            margin-bottom: 0px;
        }
    }

    .bottom-container {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .supplier-product-count {
        font-size: 12px;
        font-weight: 400;
        color: #54695B;
        background-color: #F9F9F9;
        border: 1px solid #f9f9f9;
        border-radius: 30px;
        padding: 4px 8px;
        text-transform: none;
        margin-bottom: 0px;
    }
}

@media screen and ( max-width: 1024px ) {
    .nps-suppliers-loop-grid {
        grid-template-columns: repeat(3, 1fr) !important;

        .supplier-grid-item {
            padding: 15px;
            gap: 15px;
        }

        .top-container {
            gap: 6px;
        }

        .supplier-name {
            font-size: 18px;
        }

        .supplier-product-count {
            font-size: 11px;
            padding: 4px 6px;
        }

        .right-container {
            gap: 15px;
        }
    }
}

@media screen and ( max-width: 768.9px ) {
    .nps-suppliers-loop-grid {
        grid-template-columns: repeat(2, 1fr) !important;

        .supplier-grid-item {
            flex-direction: column;
            gap: 4px;
            padding: 10px;
        }

        .left-container {
            align-self: center;
        }

        .right-container {
            align-items: center;
            gap: 8px;
        }

        .top-container {
            gap: 4px;
        }

        .supplier-name {
            align-self: center;
            text-align: center;
        }
    }
}

@media screen and ( max-width: 480px ) {
    .nps-suppliers-loop-grid {
        .supplier-name {
            font-size: 14px;
        }
        .supplier-address-container {
            justify-content: center;
        }
    }
}