@import "colors.css";

.edition-list {
  padding: 0;
  padding-bottom: 25rem;
  margin-left: 20vw;
  margin-right: 20vw;
}

.edition-entry {
  font-size: 1.5rem;
}

.edition-entry::marker {
  color: var(--secondary);
}

.edition-link {
  text-decoration: none;
  color: var(--secondary);
}

.edition-link:hover {
  text-decoration: underline;
}

.page-list-title {
  color: var(--secondary);
  margin-left: 20vw;
  font-family: Georgia;
}

.page-list-title::after {
  content: ' ';
  display: block;
  background-color: var(--secondary);
  border-radius: 32px;
  width: 40%;
  height: 0.15em;
  margin-top: 0.2em;
  margin-bottom: 1em;
}

.page-list {
  list-style-type: none;
  padding: 0;
  margin-left: 20vw;
  margin-right: 20vw;
}

.page-entry {
  margin-bottom: min(3vw, 2rem);
}

.page-card {
  position: relative;
  height: 15rem;
  border-radius: 32px 32px 32px 32px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
}

.page-card-content {
  position: absolute;
  margin: 3rem;
  bottom: 0;
  right: 0;
}

.page-date {
  color: var(--primary);
}

.page-title {
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
  color: var(--primary);
  font-family: Georgia;
}

.page-summary {
  text-decoration: none;
  color: var(--shadow);
  font-size: 0.9rem;
  bottom: 0;
  right: 0;
}

.page-entry:hover .page-title,
.page-entry:hover .page-summary {
  text-decoration: underline;
}

.page-entry:nth-child(odd) .page-card-content {
  right: 0;
  margin-left: 20%;
  text-align: right;
}

.page-entry:nth-child(even) .page-card-content {
  left: 0;
  margin-right: 20%;
  text-align: left;
}


@media only screen and (max-width: 937px) {
  .page-list {
    margin-left: 5vw;
    margin-right: 5vw;
  }

  .page-list-title {
    margin-left: 5vw;
  }

  .page-card {
    height: 13rem;
  }

  .page-title {
    font-size: 1.25rem;
  }

  .page-card-content {
    top: auto;
    bottom: auto;
  }
}