.pic {
  display: inline-block;
}

h1 {
  margin: 0;
  margin-top: 10px;
  margin-bottom: 10px;
}
details {
  max-width: 33vw;
}
.label {
  font-weight: bold;
}

ul {
  margin:0;
}

.pic img, .pic div {
  min-width: 60px;
  min-height: 100px;
  max-height: 20ch;
  background: rgb(236, 236, 236);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  text-align: center;
  vertical-align: middle;
}
.pic div {
  height: 100px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1ch;
}

@media only screen and (max-width: 1200px) {
  details {
    max-width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #e0e0e0;
  }
  .pic {
    border: white solid 1px;
    color: black
  }
}

@media screen and (orientation:landscape) {
  .pic, .attributes {
    display: inline-block;
  }
  .row1 {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    width: fit-content;
    gap: 1ch;
    grid-template-areas: 
      "title title"
      "pic attributes";
  }
  h2 {
    grid-area: title;
    display: inline-block;
    width: fit-content;
    max-width: fit-content;

  }
  .attributes {
    grid-area: attributes;
    width: fit-content;
  }
  .attributes > * {
    margin: 0.5ch;
  }
  .pic {
    grid-area: pic;
    width: fit-content;
    max-width: fit-content;
  }
}