#top-area {
  display: inline-flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

#top-area > div:nth-child(1) {
  flex: 1;
}

#medals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: fit-content;
}

/*#medals > div {
  margin: 0;
}*/

#medals * {
  margin: 0; /* Just so the images aren't affected by themes like Xara. */
  padding: 0; /* See above. */
}

#info-summary {
  display: flex;
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) { /* Just a rough idea. Needs to be adjusted for the actual theme or moved to it. */
    #info-summary {
        flex-direction: column;
    }
}

#info-summary > div {
  flex: 1;
}

#news-image {
  float: right;
}

/*#store-links, #game-links {
  display: inline-flex;
  align-items: center;
}*/

#store-links > div, #game-links > div {
  display: inline-flex;
  margin: 0 0.25rem 0 0;
}

#store-links > div:not(:last-child):not(.field__label)::after,
#game-links > div:not(:last-child):not(.field__label)::after {
  content: ",";
}

.screenshot-group div {
  text-align: center;
}

.screenshot-group img {
  margin: 0 auto;
}

.support-summary table {
  table-layout: fixed;
}

.support-summary tr td {
  padding: 0;
}

.support-summary {
  display: flex;
  flex-direction: column;
}

.game-info {
  max-width: fit-content; /* Unsure, but this is good for the Support Summary table. */
}

.screenshot-slideshow {
  width: 100%!important;
  text-align: center;
  overflow: hidden;
}

.screenshot-slideshow > * {
  max-width: max-content;
  left: 50%!important;
  transform: translateX(-50%);
  width: max-content!important;
}

/* Alternative approach to the above, which doesn't crop horizontally but also doesn't keep the height the same across the slides.
.screenshot-slideshow {
  width: 100%!important;
  text-align: center;
  max-width: 100%;
}

.screenshot-slideshow > * {
  max-width: 100%;
  right: 0;
  margin: auto;
  width: 100%!important;
}
 */

.screenshot-slideshow img {
  /*display: inline-block;*/
  margin: auto;
}

/* Gin theme content preview correction */
.node-preview-container.node-preview-container .form-item {
  display: inline-flex!important;
}