/*
 * The chosen value up close (src/Families/CloseUp.php), as the configure page's boards draw it: a panel on the
 * `surface` colour and the panel radius, the value's picture as a 96px square on the control radius beside its line
 * and the Samples link under it; on phones the picture is 80px.
 */
.lanternwp-close-up {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--wp--preset--spacing--40);
  align-items: center;
  margin-block-start: var(--wp--preset--spacing--20);
  padding: var(--wp--preset--spacing--30);
  border-radius: var(--wp--custom--radius--panel);
  background: var(--wp--preset--color--surface);

  &[hidden] {
    display: none;
  }

  @media (width < 600px) {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
}

.lanternwp-close-up__image {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--control);
  background: var(--wp--custom--color--media);

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.lanternwp-close-up__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--20);
  min-width: 0;
}

.lanternwp-close-up__text {
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--regular);
  line-height: var(--wp--custom--line-height--normal);
}