@media (max-width: 700px) {
  .thumb {
    float: none;
    width: 100%;
    margin: 0 0 15px 0;
  }
}

/* Section container */
.article {
  margin-bottom: 40px;
}

/* Floating thumbnail block */
.thumb {
  float: left;
  margin: 0 18px 10px 0;
  width: 220px;
}

/* Thumbnail image */
.thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.thumb img:hover {
  transform: scale(1.02);
}

/* Text beside image */
.article p {
  margin-top: 0;
}

/* Clear float after section */
.article::after {
  content: "";
  display: block;
  clear: both;
}

/* Expandable image overlay */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.lightbox img {
  max-width: 95%;
  max-height: 95%;
  border-radius: 10px;
}

.lightbox:target {
  display: flex;
}

.close {
  position: fixed;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  text-decoration: none;
}

/*

Plus thumbnail_text.js

<!-- Lightbox -->
    <div id="img4" class="lightbox">
      <a href="#article4" class="close" onclick="closeLightbox(event)">&times;</a>
      <img src="/images/bosch_hob/hob_bottom.JPG" alt="Expanded image" />
    </div>
    <!-- HOB EXHAUST IMAGE -->
    <div class="article" id="article5">
      <div class="thumb">
        <a href="#img5">
          <img src="/images/bosch_hob/hob_exhaust.JPG" alt="Sample image" />
        </a>
      </div>
      <p>A clearer view of the hob exhaust port.</p>
    </div>

    */