.copy-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.copy-item {
  display: grid;
  gap: 0.2rem;
  grid-template-areas: "preview preview" "description button";
  grid-template-rows: 7em;
  grid-template-columns: 1fr 45px;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  border-width: 2px 2px 5px 2px;
  padding: 6px;
  background-color: light-dark(var(--bright_orange), var(--faded_orange));
}

.copy-item__preview {
  grid-area: preview;
  font-size: 500%;
  text-align: center;
  align-content: center;
  min-width: 12rem;
}

.copy-item__button {
  grid-area: button;
  border: 3px solid black;
  padding-top: 3px;
  border-radius: 5px;
  background-color: var(--bright_yellow);
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  justify-self: end;

  &:active {
    background-color: var(--neutral_yellow);
  }
}

.copy-item__description {
  grid-area: description;
  /* max-width: 12ch; */

  /* https://stackoverflow.com/questions/55040250/how-to-match-width-of-text-to-width-of-dynamically-sized-image-title/55041133#55041133 */
  width: 0;
  min-width: 100%;
}

.copy-item__button img {
  width: 24px;
}

@media (max-width: 350px) {
  .copy-list {
    flex-direction: column;
  }

  .copy-item__description {
    max-width: unset;
  }
}

@media (max-width: 460px) {
  .copy-list {
    justify-content: center;
  }

  .copy-item {
    grid-template-rows: 5em;
  }

  .copy-item__preview {
    font-size: 400%;
    min-width: 8rem;
  }
}

summary {
  margin-block-start: 1em;
}