responsive

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menu", "overlay", "toggle"]

  toggle() {

/* Container Queries */
.card-container {
  container-type: inline-size; /* Creates query container */
  container-name: card;
}

<div class="layout" data-controller="viewport">
  <%= turbo_frame_tag "master", class: "master-pane" do %>
    <h1>Products</h1>
    <ul class="product-list">
      <% @products.each do |product| %>
        <li>

/* Mobile-first base styles (no media query needed) */
.container {
  width: 100%;
  padding: 1rem;
  margin: 0 auto;
}