.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(//qx1.org/wp-content/themes/qx1-2021/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(//qx1.org/wp-content/themes/qx1-2021/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(//qx1.org/wp-content/themes/qx1-2021/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(//qx1.org/wp-content/themes/qx1-2021/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(//qx1.org/wp-content/themes/qx1-2021/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(//qx1.org/wp-content/themes/qx1-2021/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(//qx1.org/wp-content/themes/qx1-2021/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);
}