/*
Typography
*/
/* font family */
/* perfect triangle */
/* type scale ratio */
/* type scale */
/* Vertical Rythm */
/*
xs: 576px,
sm: 768px,
md: 992px,
lg: 1200px
*/
.card {
  display: flex;
  flex-direction: column;
  border-left: 3px solid transparent;
  border-radius: 3px;
}
@media (max-width: 63rem) {
  .card {
    margin-bottom: calc(var(--spacer) * 2);
  }
}
@media print {
  .card {
    border: none;
    border-bottom: 1px solid var(--black);
    border-radius: 0;
    padding: calc(var(--spacer) * 2) 0;
    margin-bottom: 0;
    page-break-inside: avoid;
  }
}
.card > * + * {
  margin-top: var(--spacer);
}
.card:hover {
  border-left: 3px solid var(--red);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
@media print {
  .card:hover {
    border-left: none;
  }
}
.card .card-header {
  padding: calc(var(--spacer) * 2);
  padding-bottom: 0;
  background: var(--white);
}
.card .card-header .card-title-wrapper {
  display: flex;
  align-items: baseline;
  width: 100%;
}
.card .card-header .card-title-wrapper .audio-icon {
  width: 32px;
  text-align: right;
}
.card .card-header .card-title {
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--black);
  line-height: 1.2;
  margin: 0 0 var(--spacer) 0;
  display: flex;
  align-items: baseline;
  width: 100%;
}
.card .card-header .card-title svg {
  max-width: 24px;
  margin-right: calc(var(--spacer) / 2);
}
@media print {
  .card .card-header .card-title {
    font-size: 1.25rem;
  }
}
.card .card-header .card-title:hover {
  color: var(--red);
  text-decoration: underline;
}
.card .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(var(--spacer) * 2);
  padding-top: 0;
  padding-bottom: calc(var(--spacer) * 2);
  height: 100%;
  background: var(--white);
  margin-top: 0;
}
.card .card-body .card-meta {
  font-weight: bold;
}
.card .card-body .card-meta > * + *:before {
  content: "-";
  display: inline-block;
}
.card .card-body p {
  font-size: 0.9615384615rem;
}
@media (max-width: 63rem) {
  .card .card-body p {
    width: 100%;
  }
}
@media print {
  .card .card-body p {
    font-size: 0.7396449704rem;
  }
}
.card .card-footer {
  margin-top: auto;
  border-top: 1px solid var(--black);
  background: var(--white);
}
.card .card-footer > * {
  padding-left: calc(var(--spacer) * 2);
  padding-right: calc(var(--spacer) * 2);
  padding-bottom: calc(var(--spacer) * 2);
  padding-top: calc(var(--spacer) * 2);
}
.card .card-footer > * + * {
  border-top: 1px solid var(--black);
  padding-top: calc(var(--spacer) * 2);
}
.card .card-footer .card-addresse {
  display: flex;
  align-items: baseline;
  width: 100%;
  padding-top: calc(var(--spacer) * 2);
  font-size: 0.9615384615rem;
}
.card .card-footer .card-addresse svg {
  max-width: 14px;
  margin-right: calc(var(--spacer) / 2);
}
.card .card-footer .card-footer-list {
  display: flex;
  flex-direction: column;
}
.card .card-footer .card-footer-list .card-footer-list-item {
  margin-bottom: 10px;
}
.card .card-footer .card-footer-list .card-footer-list-item .card-footer-list-item-label {
  display: block;
  font-size: 0.7396449704rem;
  font-weight: bold;
  margin-bottom: calc(var(--spacer) / 2);
}
.card.has-audio .card-title:after {
  content: url("../../svg/icon/audio-16x16.svg");
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: auto;
}

.card-place .card-title {
  position: relative;
}
.card-place .card-title:before {
  content: url("../../svg/icon/pin-red-16x16.svg");
  width: 22px;
  height: 22px;
  margin-right: calc(var(--spacer) / 2);
  flex-shrink: 0;
}
.card-place .card-addresse {
  position: relative;
}
.card-place .card-addresse:before {
  content: url("../../svg/icon/pin-16x16-black.svg");
  width: 14px;
  height: 14px;
  margin-right: calc(var(--spacer) / 2);
  flex-shrink: 0;
}

.card-experience .card-title {
  position: relative;
}
.card-experience .card-title:before {
  content: url("../../svg/icon/experiences-red-16x16.svg");
  width: 22px;
  height: 22px;
  margin-right: calc(var(--spacer) / 2);
  flex-shrink: 0;
}

.card-story .card-title {
  position: relative;
}
.card-story .card-title:before {
  content: url("../../svg/icon/stories-red-16x16.svg");
  width: 22px;
  height: 22px;
  margin-right: calc(var(--spacer) / 2);
  flex-shrink: 0;
}

.card-audio .card-title {
  position: relative;
}
.card-audio .card-title:before {
  content: url("../../svg/icon/audio-red-16x16.svg");
  width: 22px;
  height: 22px;
  margin-right: calc(var(--spacer) / 2);
  flex-shrink: 0;
}
.card-audio .card-addresse {
  position: relative;
}
.card-audio .card-addresse:before {
  content: url("../../svg/icon/pin-16x16-black.svg");
  width: 14px;
  height: 14px;
  margin-right: calc(var(--spacer) / 2);
  flex-shrink: 0;
}

.rtl .card {
  direction: rtl;
  border-left: none;
  border-right: 3px solid transparent;
}
.rtl .card:hover {
  border-left: none;
  border-right: 3px solid var(--red);
}