.people {
	padding: var(--space-l-2xl) 0;

	& > div.hol-column {
		gap: var(--space-m);
		justify-items: start;

		& > .list-head {
			display: flex;
			justify-content: space-between;
			align-items: end;
			width: 100%;
			flex-wrap: wrap;
			gap: var(--space-s);

			& > div > p {
				color: var(--color-neutral-4);
				margin-top: var(--space-3xs);
				max-width: 40rem;
			}

			& > .filters {
				display: flex;
				gap: var(--space-xs);
				align-items: center;
			}
		}

		& > .cards {
			list-style: none;
			width: 100%;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
			gap: var(--space-s);

			& > li > a {
				display: flex;
				flex-direction: column;
				gap: var(--space-xs);
				height: 100%;
				padding: var(--space-s);
				border: 1px solid var(--color-neutral-8);
				border-radius: var(--border-radius);
				text-decoration: none;
				color: inherit;

				& > p {
					color: var(--color-neutral-4);
					font-size: var(--font-size--1);
				}

				& > .skills {
					list-style: none;
					display: flex;
					gap: var(--space-2xs);
					flex-wrap: wrap;

					& > li {
						background: var(--color-neutral-9);
						padding: var(--space-3xs) var(--space-xs);
						border-radius: 1em;
						font-size: var(--font-size--1);
					}
				}

				& > .availability {
					color: var(--color-color-1);
					margin-top: auto;
				}
			}
		}

		& > .empty {
			color: var(--color-neutral-4);
		}
	}
}