:root {
    --grid-size: 90px;
}

.view-dual-panel {
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 0;
}

@container window-width (max-width: 500px) {
  .view-dual-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 3fr;
  }
}

.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--grid-size));
  grid-auto-rows: var(--grid-size);
  gap: 4px;
  width: 100%;
}

.view-details {
  background-color: silver;
  box-shadow: var(--border-bevel-pressed);
  padding: 4px 8px;

  img {
    border: 1px black solid;
    margin-block: 4px 8px;
  }
}

.image-button {
  padding: 3px;
  width: var(--grid-size);
  height: calc(var(--grid-size));

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

.detail-item:not(.visible) {
  display: none;
  visibility: hidden;
}