.view-attractions #map {
  min-height: 50%;
}

.view-attractions .contacts-list {
  margin-bottom: 1em;
}

.view-attractions .contacts-list .contact-header-container .contact-name {
  font-weight: 700;
}
.view-attractions .contacts-list .contact-header-container .expiration {
  font-weight: 500;
  margin-left: 0.15em;
}

.view-attractions .contacts-list .contact-header-container .header-reactions {
  flex: 1 0 auto;

  /* display */
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  /* positioning */
  /* box-model */
  margin-left: auto;
  max-width: 20em;

  /* typography */
  /* manipulation */
  /* misc */
}

.view-attractions
  .contacts-list
  .contact-header-container
  .header-reactions
  .reaction::after {
  content: attr(data-value);
}

.view-attractions .link-icon {
  font-size: 1.25em;
  vertical-align: top;
  margin-inline-start: 0.25em;
}

.systems-wrapper .attraction-info,
.friends-wrapper .attraction-info {
  padding: 0.5em;
}

.attraction-details {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  overflow: hidden;
  transition: 0.25s max-height;
}

.attraction-details h4 {
  color: var(--theme-primary-color);
  text-transform: uppercase;
}

.attraction-details .inline-inputs {
  font-size: inherit;
}

.attraction-details .react {
  all: unset;

  /* display */
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  /* positioning */
  /* box-model */
  /* typography */
  font-size: min(2em, 6vw);
  color: var(--theme-secondary-color);

  /* manipulation */
  /* misc */
}

.attraction-details .react legend {
  visibility: hidden;
  max-height: 0;
  max-width: 0;
}

.attraction-details .react input[type="radio"] {
  width: 0;
}

.attraction-details .react .reaction {
  display: inline-block;
  font-family: "Noto Emoji";
  padding: 0.125em;
  margin-bottom: 0.75em;
  border-radius: 0.25em;
  position: relative;
}

.attraction-details .react .reaction::after {
  content: attr(data-value);

  /* display */
  display: none;

  /* positioning */
  position: absolute;
  left: 50%;
  top: 3.25em;
  transform: translateX(-50%);

  /* box-model */
  width: max-content;

  /* typography */
  font-family: var(--font-family);
  font-size: 0.5em;
  text-transform: capitalize;

  /* manipulation */
  /* misc */
}

.attraction-details .react input:checked + .reaction {
  color: var(--theme-primary-color);
  background-color: var(--theme-tertiary-color);
}

.attraction-details .react input:checked + .reaction::after {
  display: block;
}

.attraction-details table {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(2, auto);
  width: fit-content;
  vertical-align: top;
}

.attraction-details table tr {
  display: contents;
  display: subgrid;
}