.grid {
  margin-bottom: 1rem;
  padding: .5rem;
  display: grid;

  min-width: 0;
  min-height: 0;
}

.grid-item {
  min-width: 0;
  min-height: 0;

  display: flex;
  /* 🔑 */
  align-items: stretch;
  /* 🔑 */
}

a.grid-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.grid-card {
  background-color: #60a7a734;
  padding: 1rem;
  border-radius: 1rem;

  width: 100%;
  height: 100%;
  /* 🔑 */
  display: flex;
  /* 🔑 */
  flex-direction: column;
}

.grid-card h4,
.grid-card h5 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.grid-card p {
  text-align: center;
  margin: 0;
  flex-grow: 1;
}

.grid-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/*
------------------
IOT PLATFORM SECTION
------------------
*/

#iot-platform-grid-1,
#iot-platform-grid-2 {
  max-height: none;
  /* important for mobile */
}

#iot-platform-grid-1 {

  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin-bottom: 2rem;
  column-gap: calc(.1rem + 1vw);
  row-gap: 1rem;
}



#iot-platform-grid-1-i1 {
  grid-column: 1;
  grid-row: 1/4;
}

#iot-platform-grid-1-i2 {
  grid-column: 2/4;
  grid-row: 3;
}

#iot-platform-grid-1-i3 {
  grid-column: 2;
  grid-row: 1;
}

#iot-platform-grid-1-i4 {
  grid-column: 3;
  grid-row: 1;
}

#iot-platform-grid-1-i5 {
  grid-column: 2;
  grid-row: 2;
}

#iot-platform-grid-1-i6 {
  grid-column: 3;
  grid-row: 2;
}



#iot-platform-grid-2 {
  grid-template-rows: 3fr 5fr;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 2rem;

  column-gap: calc(.1rem + 1vw);
  row-gap: 2rem;
}




#iot-platform-grid-2-i1 {
  grid-column: 1/4;
  grid-row: 2;
}

#iot-platform-grid-2-i2 {
  grid-column: 1;
  grid-row: 1;
}

#iot-platform-grid-2-i3 {
  grid-column: 2;
  grid-row: 1;
}

#iot-platform-grid-2-i4 {
  grid-column: 3;
  grid-row: 1;
}


#iot-platform-grid-2 .grid-item {
  align-items: flex-start;
}

#iot-platform-grid-2 .grid-card {
  height: auto;
}


/*
  -----------------
  PRODUCTS SECTION
  -----------------
  */

#products-grid .grid-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}



#products-grid {
  display: flex;
  flex-direction: row;
  gap: 1rem;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  padding: 1rem 0.5rem;
}

#products-grid::-webkit-scrollbar {
  display: none;
}

#products-grid .grid-item {
  flex: 0 0 auto;      /* 🔑 prevents shrinking */
  width: 320px;        /* desktop size */
  max-width: 85vw;     /* mobile safety */
  scroll-snap-align: start;
}

#products-grid .grid-item .grid-card {
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  background-color: #ffffff9d;
  border: solid .2rem rgb(218, 218, 218);
}

#products-grid .grid-item:hover .grid-card {

  transform: translateY(-4px);
  cursor: pointer;
  outline: .3rem solid var(--bs-primary);
  outline-offset: -.2rem;
  box-shadow: 10px 10px #e9c02d;
}

#products-grid .grid-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

#products-grid .grid-card-image img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 180px;
  /* or 160px */
  object-fit: contain;
}

#products-grid .grid-card-title {
  font-weight: bold;
  text-align: center;
  margin: 0.75rem 0 0.5rem;
}

#products-grid .grid-card-subtitle {
  text-align: center;
  margin: 0.5rem;
  flex: 1 1 auto;
}

#products-grid .grid-card-cta {
  text-align: center;
  background-color: var(--bs-primary);
  padding: 0.75rem;
  flex: 0 0 auto;
}

@media (hover: hover) {
  #products-grid {
    cursor: grab;
  }

  #products-grid:active {
    cursor: grabbing;
  }
}

@media (max-width: 550px) {

  /* give the section a bit more usable width if you want */
  #iot-platform .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* GRID 1: stack cleanly */
  #iot-platform-grid-1 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 1rem;
    column-gap: 0;
    max-height: none;
  }

  #iot-platform-grid-1-i1,
  #iot-platform-grid-1-i2,
  #iot-platform-grid-1-i3,
  #iot-platform-grid-1-i4,
  #iot-platform-grid-1-i5,
  #iot-platform-grid-1-i6 {
    grid-column: auto;
    grid-row: auto;
  }

  /* GRID 2: also stack (or 2 columns if you prefer) */
  #iot-platform-grid-2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 1rem;
    column-gap: 0;
    max-height: none;
  }

  #iot-platform-grid-2-i1,
  #iot-platform-grid-2-i2,
  #iot-platform-grid-2-i3,
  #iot-platform-grid-2-i4 {
    grid-column: auto;
    grid-row: auto;
  }

#products-grid .grid-item {
    aspect-ratio: auto;
    max-height: none;
  }

}