.comic-navigation {
  display: flex;

  /* eslint-disable-next-line css/no-invalid-properties */
  gap: var(--MARGIN_MAIN);
  justify-content: space-evenly;
  justify-items: center;
  align-items: start;
}

.comic-navigation {
  flex: 1;
}

.comic-navigation-next,
.comic-navigation-last {
  text-align: right;
}

.comic-navigation a {
  text-decoration: none;

  /* eslint-disable-next-line css/no-invalid-properties */
  color: var(--COLOR_MAIN);
}

@media screen and (max-width:900px) {
  /* Screen is smaller than width in px */

  .comic-navigation:has(> :nth-child(3)) {
    /* select comic navigation if it has 3 or more children */
    display: grid;

    /* 2 columns and 2 rows */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;

    grid-template-areas:
      "g1 g2"
      "g3 g4";
  }

  *:has(>.comic-navigation-first) {
    grid-area: g3;
    justify-self: end;
  }

  *:has(>.comic-navigation-previous) {
    grid-area: g1;
    justify-self: end;
  }

  *:has(>.comic-navigation-next) {
    grid-area: g2;
    justify-self: start;
  }

  *:has(>.comic-navigation-last) {
    grid-area: g4;
    justify-self: start;
  }
}
.gallery-section {
  display: grid;

  /* eslint-disable-next-line css/no-invalid-properties */
  gap: var(--MARGIN_MAIN);

  /* eslint-disable-next-line css/no-invalid-properties */
  margin-bottom: var(--MARGIN_MAIN);
  justify-content: center;
}

.gallery-section div {
  margin-bottom: 0;
}

.gallery-grid-extras {
  position: absolute;
}
.artwork-section {
  display: flex;
  justify-content: center;

  position: relative;
}

.artwork-section-image img {
  max-height: 80vh;
  height: auto;
  width: auto;
  object-fit: scale-down;
  cursor: pointer;
}

.artwork-section-unconstrain-height {
  max-height: none !important;
}

.artwork-download {
  align-content: end;
}

.artwork-download-button {
  cursor: pointer;
}

.artwork-download-hidden {
  display: none;
}

.artwork-download-share-hidden {
  display: none;
}
.info-section {
  display: flex;
  flex-flow: wrap;

  /* eslint-disable-next-line css/no-invalid-properties */
  gap: var(--MARGIN_MAIN);

  /* eslint-disable-next-line css/no-invalid-properties */
  margin-bottom: var(--MARGIN_MAIN);

  justify-content: space-between;
}

.info-section>div {
  flex: 2;
  margin-bottom: 0;

  /* Picked at random cause it looked nice */
  min-width: 400px;
}

.info-section>div:nth-child(2) {
  /* Selector for the 2nd div inside of info-section, which is the tags. */
  flex: 1;
}

.info-section-blurb {
  display: flex;
  flex-flow: wrap;

  /* eslint-disable-next-line css/no-invalid-properties */
  gap: var(--MARGIN_MAIN);
}