@import url(global.css);
@import url(color.css);
@import url(typography.css);
@import url(components.css);

#journalPageIntro {
  background-image: url(images/2025/misc/seb-1-landscape.jpg);
  background-size: cover;
  background-position: bottom;
}

.journal-entry {
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: 4px;
}
@media (max-width: 1024px) {
  .journal-entry {
    height: 400px;
  }
}

.journal-entry-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  gap: var(--spacing-sm);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4));
  justify-content: end;
}
.journal-entry-content:hover {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1));
}

#journalEntry-lochRannoch {
  background-image: url(images/2025/lochRannoch/3-landscape.jpg);
  background-size: cover;
  background-position: center;
}