@charset "UTF-8";
/* Mixins
================================================== */
/* Breakpoints
================================================== */
/*
320px – very small phones (old iPhones, edge cases)

375px – modern iPhone width (very common)

450px – large phones / Pro Max

768px – iPad portrait

1024px – iPad landscape

1280px – common laptop

1440px – large monitors

1920px – full HD (usually max-width, not layout change)









*/
.section-journalcards .journal-cards__intro {
  padding-bottom: 2em;
}
.section-journalcards .journal-cards__intro .content {
  position: sticky;
  top: 3em;
}
.section-journalcards .journal-cards__intro .content > :first-child {
  margin-top: 0;
  margin-bottom: 40vh;
}
.section-journalcards .journal-cards__intro .journal-cards__heading {
  max-width: 7.45em;
}
.section-journalcards .journal-cards__intro .journal-cards__footer.lead {
  max-width: 30em;
}
@media (min-width: 990px) {
  .section-journalcards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 0;
  }
  .section-journalcards .journal-cards__intro {
    width: calc(47% - 2em);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .section-journalcards .journal-cards__grid {
    width: 53%;
    padding: 0 1.5em;
    box-sizing: border-box;
    border-left: solid 1px var(--color-grey);
  }
  .section-journalcards .journal-cards__grid > :first-child {
    border-top: none;
  }
}

.journal-card-wrap {
  border-top: solid 1px var(--color-grey);
}

.journal-card {
  padding: 1em;
  margin-bottom: 1em;
  margin-top: 1em;
  box-sizing: border-box;
  display: block;
  position: relative;
  transition: ease-in 0.25s;
}
.journal-card .media {
  width: 100%;
  padding-bottom: 65%;
  margin-bottom: 1.25em;
}
.journal-card .journal-card__title {
  margin-top: 0;
}
.journal-card .arrow-icon-button {
  position: absolute;
  left: 1em;
  bottom: 1em;
}
.journal-card:focus, .journal-card:hover {
  background-color: #000;
}
.journal-card:focus *, .journal-card:hover * {
  color: #fff;
}
.journal-card:focus .arrow-icon-button i:before, .journal-card:hover .arrow-icon-button i:before {
  filter: invert(1);
}
@media (min-width: 1200px) {
  .journal-card {
    display: flex;
    flex-wrap: wrap;
  }
  .journal-card .journal-card__title {
    max-width: 17em;
  }
  .journal-card .right {
    width: 53%;
  }
  .journal-card .left {
    width: 47%;
    box-sizing: border-box;
    padding-right: 2em;
  }
}