<div class="wrapper">
  <div class="warning"><strong>Warning:</strong> Your browser does not support CSS container queries. Please open this demo in Chrome Canary with the experimental <i>#enable-container-queries</i> flag turned on.</div>

  <!-- Button Component Start -->
  <div class="cart-button-container">
    <button class="cart-button">
      <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 173">
        <g class="plus-group">
          <line x1="278" y1="36" x2="278" y2="124" />
          <line x1="322" y1="80" x2="234" y2="80" />
        </g>
        <g class="cart-lines-group">
          <line x1="38" y1="68" x2="200" y2="68" />
          <line x1="83.54" y1="36.2" x2="95.69" y2="99.84" />
          <line x1="156.23" y1="36.2" x2="144.7" y2="99.84" />
        </g>
        <g class="cart-group">
          <polyline points="44 100 190.95 100 209.44 36 30.77 36 44.48 100" />
          <polyline points="185 131 51.44 131 44.78 99.91 24.46 5 0 5" />
          <circle cx="68" cy="152" r="16" />
          <circle cx="169" cy="152" r="16" />
        </g>
      </svg>
      <p class="cart-text"><span class="add">Add</span> <span class="to-cart">to cart</span></p>
    </button>
  </div>
  <!-- Button Component End -->

  <div class="product-card-container">
    <div class="product-card">
      <img src="https://www.ikea.com/us/en/images/products/graeddaepple-plant-pot-indoor-outdoor-pink-white__0952322_PE804311_S5.JPG?f=xs" />
      <div>
        <h3 class="title">Pink Hand-made Planter</h3>
        <span class="price">$16.99</span>
        <p class="desc">Handmade in Brooklyn, NY. Dimensions: 16" at opening, 10" at base. Round dome shape for single or multiple plantings. </p>
        <!-- Button Component Start -->
        <div class="cart-button-container">
          <button class="cart-button">
            <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 173">
              <g class="plus-group">
                <line x1="278" y1="36" x2="278" y2="124" />
                <line x1="322" y1="80" x2="234" y2="80" />
              </g>
              <g class="cart-lines-group">
                <line x1="38" y1="68" x2="200" y2="68" />
                <line x1="83.54" y1="36.2" x2="95.69" y2="99.84" />
                <line x1="156.23" y1="36.2" x2="144.7" y2="99.84" />
              </g>
              <g class="cart-group">
                <polyline points="44 100 190.95 100 209.44 36 30.77 36 44.48 100" />
                <polyline points="185 131 51.44 131 44.78 99.91 24.46 5 0 5" />
                <circle cx="68" cy="152" r="16" />
                <circle cx="169" cy="152" r="16" />
              </g>
            </svg>
            <p class="cart-text"><span class="add">Add</span> <span class="to-cart">to cart</span></p>
          </button>
        </div>
        <!-- Button Component End -->
      </div>
    </div>
  </div>

  <div class="form">
    <label for="width">Change the width of the query container</label>
    <input type="range" id="width" min="2" max="100" step="1" name="width" value="50">
    <output id="output">50%</output>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
}

:root {
  --btn-bg: #7fffd0;
  --btn-border: magenta;
  --text: black;
  --width: 50%;
}

.wrapper {
  display: grid;
  gap: 20px;
  grid-template-rows: fit-content(120px) auto fit-content(120px) fit-content(
      180px
    );
  grid-template-areas:
    "button"
    "card"
    "form"
    "warning";
  width: var(--width);
  height: 100vh;
  margin: 0 auto;
}

.form {
  grid-area: form;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #fff;
}

.cart-button-container {
  grid-area: button;
  padding: 2rem;
  display: grid;
  justify-content: center;
}

.product-card-container {
  grid-area: card;
  justify-self: center;
  align-self: center;
}

.warning {
  grid-area: warning;
}

.plus-group > line {
  stroke-width: 20px;
  stroke: var(--text);
}

.cart-lines-group > line,
.cart-group > polyline,
.cart-group > circle {
  stroke-width: 10px;
  stroke: var(--text);
  fill: none;
}

.cart-button {
  background: var(--btn-bg);
  border: 2px dashed var(--btn-border);
  box-shadow: 6px 6px 0 var(--btn-border);
  max-width: 60px;
  display: inline-block;
  height: 3rem;
  border-radius: 10px;
  align-content: center;
  font-family: "Exo", Arial, sans-serif;
}

.cart-text {
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 18px;
  padding: 0.25rem;
}

.cart-icon {
  margin-right: -0.5rem;
}

.add-group,
.to-cart-group,
.plus-group,
.cart-lines-group,
.add,
.to-cart {
  display: none;
}

.cart-button-container {
  container: inline-size;
  width: 100%;
}

.cart-icon {
  container: inline-size;
  width: 100%;
  height: 100%;
}

/* Cart lines at 30px or wider*/
@container (min-width: 30px) {
  .cart-lines-group {
    display: block;
  }
}

/* Add "+" at 50px or wider*/
@container (min-width: 50px) {
  .plus-group {
    display: block;
  }
}

/* "Add" instead of "+" at 100px*/
@container (min-width: 100px) {
  .cart-button {
    padding: 0 1rem;
    display: grid;
    max-width: 120px;
    grid-template-columns: 1fr 1fr;
  }

  .plus-group {
    display: none;
  }

  .cart-text .add {
    display: inline-block;
  }

  .cart-icon {
    margin-right: 0;
  }
}

/* "Add to cart" for wider spaces*/
@container (min-width: 220px) {
  .cart-button {
    max-width: 260px;
    grid-template-columns: 1fr 3fr;
  }

  .cart-text .to-cart {
    display: inline-block;
  }
}

.product-card {
  padding: 1rem;
  border: 3px solid var(--btn-bg);
  text-align: center;
  font-family: "Exo", Arial, sans-serif;
  background-color: #fff;
}

.product-card img {
  width: 100%;
  display: block;
  max-width: 200px;
  margin: 0 auto;
}

.product-card .desc {
  display: none;
}

.product-card .title {
  text-transform: uppercase;
  color: magenta;
  font-size: 1rem;
}

.product-card .price {
  display: block;
  margin: 1rem 0;
  line-height: 0;
  font-style: italic;
  color: #00b371;
}

.product-card-container {
  container: inline-size;
  container-name: product-card-container;
  width: 100%;
  max-width: 640px;
}

.product-card .cart-button {
  margin: 0 auto;
  container-name: product-card-container;
}

@container (min-width: 200px) {
  .product-card .desc {
    display: block;
  }

  .product-card {
    padding: 1rem 1rem 2rem;
    border: 5px solid var(--btn-bg);
    text-align: left;
  }

  .product-card .title {
    font-size: 1.25rem;
  }

  .product-card .price {
    font-size: 1rem;
  }
}

@container (min-width: 250px) {
  .product-card {
    border: 11px solid var(--btn-bg);
  }

  .product-card .title {
    font-size: 1.5rem;
  }

  .product-card .price {
    font-size: 1.25rem;
  }
}

@container product-card-container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
  }

  .product-card .cart-button {
    margin: 0;
  }
}

.warning {
  max-width: 460px;
  margin: 2rem auto;
  background: #ffcebf;
  border: 1px solid tomato;
  padding: 1rem;
}

@supports (container: inline-size) {
  .warning {
    display: none;
  }
}

const rootEle = document.documentElement;
const range = document.getElementById("width");
const output = document.getElementById("output");

range.addEventListener("change", (etv) => {
  rootEle.style.setProperty("--width", `${etv.target.value}%`);
  output.textContent = `${etv.target.value}%`;
});