.layout-builder-browser-block-item img {
  width: 100%;
  margin-bottom: 10px;
}

.layout-builder-warning--gin {
  background-color: #483e1e;
  color: #efcf64;
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  font-family: Ginter, Inter, "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.layout-builder-warning__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  column-gap: 12px;
  color: unset;
  font-family: unset;
}

.layout-builder-warning__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}

.layout-builder-warning__icon svg {
  width: 100%;
  height: 100%;
}

.layout-builder-warning__text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: inherit;
  padding-left: 36px;
}

/*
 * Isolate transitions within layout builder blocks to prevent transitionend
 * events from bubbling up to the main canvas element.
 */
#layout-builder [data-layout-block-uuid] {
  /* Create a new stacking context to isolate transitions */
  isolation: isolate;
}

/*
 * Prevent transitions on highlighted elements from continuously firing.
 * This stops the scroll-to-highlighted behavior from triggering repeatedly.
 */
.is-layout-builder-highlighted {
  /* Disable transitions on highlighted elements to stop the scroll loop */
  transition: none !important;
}

.is-layout-builder-highlighted * {
  /* Also disable transitions on child elements */
  transition: none !important;
}

/*
 * Target Lit web components specifically - these are the source of the
 * bubbling transitionend events on Platform.
 */
#layout-builder [data-layout-block-uuid] outline-element,
#layout-builder [data-layout-block-uuid] [class^="outline-"],
#layout-builder [data-layout-block-uuid] [class*=" outline-"] {
  /* Isolate Lit component transitions */
  contain: style;
}

.layout-builder__layout::before {
  display: block;
  content: attr(id);
  margin-left: 1.2rem;
  color: #686868;
  position: absolute;
  margin-top: -2ch;
  text-decoration: underline;
}