@import url("../vote.css");

.main {
   max-width: 400px;
}
/* cards of a row share their title, image and lecturer rows, so a long
   title moves all images of that row down instead of being cut off */
.grid > a {
   display: grid;
   grid-row: span 3;
   grid-template-rows: subgrid;
   row-gap: 0;
}
.workshop {
   display: contents;
   font-size: 18px;
}
.workshop h1 {
   min-height: 2em;
   font-size: inherit;
}
.workshop-main {
   position: relative;
   margin-bottom: 4px;
   width: 100%;
   padding-bottom: 56.25%;
}
.workshop-excerpt,
.workshop-thumbnail {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.workshop-excerpt {
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   /* prevent cutting off last line */
   column-count: 1;
}
.workshop-thumbnail {
   background-size: cover;
   background-position: center;
   border: none;
}
.workshop-meta {
   display: flex;
   align-items: center;
   margin-top: 16px;
   user-select: none;
}
.workshop-avatars {
   padding-left: 16px;
   white-space: nowrap;
}
.workshop-lecturers {
   padding-left: 16px;
   line-height: 19px;
}
.workshop-lecturer {
   display: inline-block;
   /*   font-weight: bold;*/
}
.workshop .avatar {
   position: relative;
   margin-left: -16px;
   border: 2px solid #fff;
}
.workshop .avatar:nth-child(1) {
   z-index: 4;
}
.workshop .avatar:nth-child(2) {
   z-index: 3;
}
.workshop .avatar:nth-child(3) {
   z-index: 2;
}
.workshop .avatar:nth-child(4) {
   z-index: 1;
}
.workshop .avatar:hover {
   z-index: 5;
}