@layer component{.employee-overview{--min-column-size: 300px;display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--min-column-size)), 1fr));gap:16px}@media(min-width: 768px){.employee-overview{gap:24px}}@media(min-width: 992px){.employee-overview{gap:32px}}}
@layer theme{.employee-card{display:grid;grid-template-areas:"card-overlap";overflow:hidden}.employee-card .image-item{position:relative;overflow:hidden;grid-area:card-overlap;border-radius:var(--radius-4)}.employee-card .image-item img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius-4)}.employee-card .image-item::after{content:"";display:block;height:100%;background:linear-gradient(0deg, var(--true-black) 0%, color-mix(in srgb, var(--black) 0%, transparent) 67.89%);width:100%;position:absolute;bottom:0;border-radius:var(--card-radius);transition:transform var(--transition);transform-origin:bottom;transform:translateY(100%)}.employee-card .btn-content{grid-area:card-overlap;padding-block:16px;padding-inline:16px;z-index:1;display:flex;flex-direction:column;margin-block-start:auto;color:var(--white);transform:translateY(48px) translateY(48px);transition:transform var(--transition)}.employee-card .btn-content>span{font-size:var(--medium-text-size);margin-block-end:4px}.employee-card .btn-content>span:first-child{font-size:calc(var(--heading-size)*var(--fs-ratio-4));font-weight:500;margin-block-end:4px;text-shadow:var(--employee-shadow)}@media(min-width: 768px){.employee-card .btn-content>span:first-child{--fs-ratio-4: 0.315}}.employee-card .btn-content>span:nth-child(2){display:block;font-weight:500;margin-block-end:16px;text-shadow:var(--employee-shadow)}.employee-card .btn-content>span:last-child{margin-bottom:0;min-height:48px;word-break:break-all}.employee-card .btn-content:has(span:nth-child(3):empty){transform:translateY(48px) translateY(24px)}@media(min-width: 768px){.employee-card .image-item img{aspect-ratio:.85;width:100%}}.employee-card:not([disabled]):active .image-item::after{transform:translateY(0)}.employee-card:not([disabled]):active .btn-content{transform:translateY(0)}@media(hover: hover){.employee-card:not([disabled]):hover .image-item::after{transform:translateY(0)}.employee-card:not([disabled]):hover .btn-content{transform:translateY(0)}}}