/*
 * only make Card, Teaser nice. chips and tags can also be here.
**/
.node--view-mode-slide-style-1 {
  height: 400px; }
  .node--view-mode-slide-style-1 .row {
    height: 100%; }
  .node--view-mode-slide-style-1 .card-folder {
    max-width: 300px; }
  .node--view-mode-slide-style-1 .first-col {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end; }
  .node--view-mode-slide-style-1 .second-col {
    margin-bottom: 1.25rem;
    /* from Card margin-bottom */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start; }
    .node--view-mode-slide-style-1 .second-col .field--name-body {
      flex-grow: 1; }

.Card,
.node--view-mode-card,
.node--view-mode-teaser {
  background-color: var(--bg-color-2);
  border: 1px solid var(--text-color);
  border-radius: 0.4rem;
  box-shadow: 0 1px 2px rgba(40, 32, 16, 0.06), 0 6px 12px rgba(40, 32, 16, 0.08), 0 16px 32px rgba(40, 32, 16, 0.1);
  padding: 1.25rem 1.1rem;
  margin-bottom: 1.25rem;
  width: 100%; }

.card-folder .card-top-illu {
  position: relative;
  height: 3em;
  margin-bottom: 1em; }
  .card-folder .card-top-illu img {
    position: absolute;
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
    transition: transform 0.2s ease; }

.card-folder:hover h5 {
  font-size: 1.4rem; }

.card-folder:hover .card-top-illu img {
  transform: scale(1.12); }

.card-folder:hover .subtitle {
  font-size: 1.1rem; }

/*
 * any card should be center-aligned and pretty?
 * text above photo means, mostly reading. photo above text means, mostly watching
**/
.node--type-issue.node--view-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center; }