.products-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
}

.product-container {
  container-type: inline-size;
}

/* Стили по умолчанию (мобильный) */
.product-card {
  display: flex;
  flex-direction: column;
}

/* Адаптация для контейнеров шире 350px */
@container (min-width: 350px) {
  .product-card {
    flex-direction: row;
    gap: 1rem;
  }
  
  .product-card img {
    width: 40%;
  }
}

/* Специфичные стили для больших контейнеров */
@container (min-width: 600px) {
  .product-card {
    position: relative;
  }
  
  .product-card .badge {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}