kit/assets/flex-kit/item/flex-item.css

/* flex-card */

.flex-card {
    --aspect-ratio: calc(200 / 300);
    --gap-inner: 10px;
    position: relative;
}
.flex-card:hover .flex-card__content {
    box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.1);
}
.flex-card__section {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.flex-card::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: calc((100% - var(--gap, 0) * (var(--col-span, 1) - 1)) / (var(--aspect-ratio)) / var(--col-span, 1));
    pointer-events: none;
}
.flex-card__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    border-width: 0;
    border-style: solid;
    border-color: #e9e9e9;
    /*border-radius: 3px;*/
    overflow: hidden;
    transition: 0.3s;
    background-color: var(--kit-color-content);
    /*padding-bottom: calc(var(--gap-inner) / 2);*/
    /*padding-top: calc(var(--gap-inner) / 2);*/
}
.aspect-ratio.flex-card__body-shell:before {
    /*padding-bottom: calc((100% / var(--col-span, 1) - var(--gap, 0)) / (var(--aspect-ratio)));*/
    padding-bottom: calc((100% - var(--gap, 0) * (var(--col-span, 1) - 1)) / (var(--aspect-ratio)) / var(--col-span, 1));
}
.flex-card__border {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    display: block;
    pointer-events: none;
}
.flex-card__content:after,
.flex-card__body:before,
.flex-card__body:after {
    content: '';
    display: block;
    flex-basis: calc(var(--gap-inner) / 2);
    flex-grow: 0;
    flex-shrink: 0;
}
.flex-card__content > *:not(.flex-card__border):empty {
    display: none;
}
.flex-card__header {
    width: 100%;
}
.flex-card__top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.flex-card__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.flex-card__body {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    height: 100%;
    flex: 1 0 100%;
}
.flex-card__body > *, .flex-card__hover {
    margin: calc(var(--gap-inner) / 2) var(--gap-inner);
}
.flex-card__body > *:empty, .flex-card__hover > *:empty {
    display: none;
}
.flex-card__footer {
    position: relative;
}
.flex-card__hover {
    position: relative;
    opacity: 0;
    visibility: hidden;
}
.flex-card:hover .flex-card__content {
    height: auto;
    z-index: 100;
}
.flex-card:hover .flex-card__content > .flex-card__hover {
    opacity: 1;
    visibility: visible;
    margin-top: calc(-1 * var(--gap-inner) / 2);
}

.flex-card__picture {
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 1;
    height: 0%;
    --aspect-ratio: 1;
}
.flex-card__picture.aspect-ratio {
    --aspect-ratio: 1;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 1;
    height: auto;
}

.flex-card__picture .kit-picture {
    position: relative;
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-origin: content-box;
}
.flex-card__name, .flex-card__title {
    --line-clamp: 2;
    --line-clamp-height: 1.1em;
    flex-shrink: 0; /* todo test */
}
.flex-card__props {
    position: relative;
}
.flex-card__text {
    position: relative;
}
.flex-card__manager {
    position: relative;
}
.flex-card__flex-delimiter {
    flex: 1 10 0;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
}
.flex-card__ticket {
    position: absolute;
    top: var(--gap-inner);
    left: var(--gap-inner);
}
/* flex-card-list--list */

.flex-card-list--list {
    --col-count: 1;
}

.flex-card-list--list .flex-card.aspect-ratio:before {
    padding-bottom: unset;
}
.flex-card-list--list .flex-card.aspect-ratio:before {
    padding-bottom: unset;
}
.flex-card-list--list .flex-card.aspect-ratio > .flex-card__section {
    position: relative;
}
.flex-card-list--list .flex-card__body-shell.aspect-ratio:before {
    padding-bottom: unset;
}
.flex-card-list--list .flex-card__body {
    position: relative;
    flex-direction: row;
}
.flex-card-list--list .flex-card__body > .flex-card__picture {
    flex-basis: 12%;
    flex-shrink: 0;
    height: auto;
    position: relative;
}
.flex-card-list--list .flex-card__body > .flex-card__picture {
    flex-basis: 50px;
    flex-shrink: 0;
    height: auto;
    position: relative;
}
.flex-card-list--list .flex-card__body > .flex-card__picture:before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
}
.flex-card-list--list .flex-card__body > .flex-card__picture > .kit-picture {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: contain;
}

/* ticket */

.flex-list--ticket {
    --col-count: 1;
    --gap: 3px;
    --line-clamp: 1;
    --line-clamp-height: 1em;
    font-size: 0.7em;
    flex-direction: column;
    align-items: flex-start;
}
.flex-list--ticket > .flex-list-item {
    --col-width: auto;
}
.ticket-item {
    padding: calc(2 * 0.1em) calc(6 * 0.1em);
    background-color: hsl(0, 0%, 95%);
}