.table-container {
    width: 70%; /* Ширина контейнера (можно изменить на фиксированную, например 800px) */
    max-width: 100%;
    overflow-x: auto;
    margin: 0 auto; /* Дополнительное центрирование (если нужно) */
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    width: 100%; /* Занимает всю ширину .table-container */
}

/* Остальные стили остаются без изменений */
.grid-header, .grid-row {
    display: contents;
}

.grid-cell {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
    word-break: break-word;
}

.grid-header .grid-cell {
    background: url("https://vaservice.ru/images/background-dots.png");
    background-blend-mode: color-burn;
    background-color: #28211c;
    color: white;
    font-weight: bold;
    position: sticky;
    top: 0;
}

.grid-row:hover .grid-cell {
    background-color: #f5f5f5;
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr 1fr;
    }
    .products-grid .grid-cell:nth-child(3) {
        grid-column: span 2;
    }
    .grid-cell {
        padding: 8px 10px;
        font-size: 14px;
    }
}