.main-content {
  flex-grow: 1;
  padding: 24px;
  background-color: #fff;
}

.content-card {
  background-color: #fff;
  border: 1px solid var(--google-border-color);
  border-radius: 8px;
  padding: 24px; /** desktop padding: 35px 175px; **/
  margin-bottom: 15px;
}

.section-title {
  font-size: 20px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 15px;
}

/*
  These styles will ONLY apply if the browser window is 768px wide or WIDER.
  This is our breakpoint for tablets and desktops.
*/
@media (min-width: 768px) {
  /* --- Layout Adjustments for Desktop --- */

  /* Restore the wide padding for content cards on large screens */
  .content-card {
    padding: 20px 175px;
  }

  /* Reduce the AI agent image width back to 50% on large screens */
  .ai-agent-image {
    width: 50%;
    height: 50%;
  }
}

.img-thumbnail {
  display: block;
  width: 100%; /* Make the image take the full width of its container */
  height: 284px; /* A fixed height for all thumbnails */

  object-fit: contain; /* This is the key property */

  margin: 24px 0; /* Add space above and below, but don't center horizontally */
  border-radius: 8px;
}