body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}

.search-container input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
  background: #ccffcc;
}

.search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 23px;
  background: #79d2a1;;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.search-container button:hover {
  background: #ccc;
}

.gallery {
    margin: 30px;
    margin-left: 10px;
    border: 1px solid black;
    height: 150px;
    width: 500px;
}

.gallery:hover {
    border: 1px solid #777;
    opacity: 0.7;
}

.gallery img {
    width: auto;
    height: 100%;
    float: left;
}

.desc {
    text-align: left;
    float: left;
    padding: 30px;
}


  /* Masonry container: columns instead of row grid */
  .masonry {
    column-gap: 16px;            /* horizontal spacing between columns */
  }
  /* Default: mobile = 1 column */
  .masonry { column-count: 1; }

  /* Tablet */
  @media (min-width: 600px) {
    .masonry { column-count: 2; }
  }

  /* Medium screens (W3 m breakpoint approx) */
  @media (min-width: 768px) {
    .masonry { column-count: 3; }
  }

  /* Large screens (W3 l breakpoint approx) */
  @media (min-width: 992px) {
    .masonry { column-count: 4; }
  }

  /* Masonry item: must be inline-block and avoid breaking */
  .masonry-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 16px;            /* vertical spacing between cards */
    break-inside: avoid;         /* prevent column breaks inside cards */
  }

  /* Optional card visuals */
  .flora-card .flora-title   { font-weight: 600; }
  .flora-card .flora-sname   { font-style: italic; color: #555; }
  .flora-card .thumb-wrap    { position: relative; width: 100%; padding-top: 66.66%; overflow: hidden; border-radius: 4px; }
  .flora-card .thumb-wrap img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }