/* Rocks and minerals. The photograph is the question, so it gets the room. */
.geo-photo{
  display:block;width:100%;max-width:420px;margin:12px auto;
  aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2);
}
.geo-photo.big{max-width:460px}
.geo-photo.small{width:88px;min-width:88px;margin:0;aspect-ratio:1/1}
.prompt.small{font-size:17px;line-height:1.45;max-width:34em;margin:12px auto;text-align:center}

.geo-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.geo-choice{
  -webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);color:var(--text);
  transition:border-color var(--med) var(--ease),box-shadow var(--med) var(--ease);
}
.geo-choice .geo-photo{margin:0;width:100%}
.geo-choice:hover{border-color:var(--blue);box-shadow:var(--e1)}
.geo-choice-name{font-size:15px;text-align:center}
.geo-choice.done{cursor:default}
.geo-choice.good{border-color:var(--green);background:var(--green-bg)}
.geo-choice.bad{border-color:var(--red);background:var(--red-bg)}

.geo-fact{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}
.geo-name{font-size:18px;color:var(--text)}
.geo-what{font-size:13px;color:var(--text-2);margin:0;line-height:1.45}
@media (max-width:520px){
  .geo-fact{flex-direction:column}
  .geo-photo.small{width:100%;aspect-ratio:4/3}
}