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

	& > .profile-layout {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xl);
		align-items: start;

		& > .sidebar {
			flex: 1 1 16rem;
			display: flex;
			flex-direction: column;
			gap: var(--space-s);
			align-items: start;

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

				& > .badges {
					list-style: none;
					display: flex;
					gap: var(--space-xs);
					margin-top: var(--space-xs);
					flex-wrap: wrap;

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

			& > dl {
				display: flex;
				flex-direction: column;
				gap: var(--space-xs);
				width: 100%;
				padding-top: var(--space-s);
				border-top: 1px solid var(--color-neutral-8);

				& > div {
					display: flex;
					justify-content: space-between;
					font-size: var(--font-size--1);

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

					& > dd {
						margin: 0;
						font-weight: 500;
					}
				}
			}

			& > .actions {
				display: flex;
				gap: var(--space-xs);
				flex-wrap: wrap;
			}

			& > .anonymity-note {
				color: var(--color-neutral-5);
				font-size: var(--font-size--1);
			}
		}

		& > .main {
			flex: 2 1 26rem;
			display: flex;
			flex-direction: column;
			gap: var(--space-xl);

			& > section {
				display: flex;
				flex-direction: column;
				gap: var(--space-s);

				& > h3 {
					font-size: var(--font-size-2);
					padding-bottom: var(--space-xs);
					border-bottom: 1px solid var(--color-neutral-8);
				}

				& > .skills {
					list-style: none;
					display: flex;
					gap: var(--space-xs);
					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);
					}
				}

				& > .timeline {
					list-style: none;
					display: flex;
					flex-direction: column;
					gap: var(--space-m);

					& > li {
						display: grid;
						grid-template-columns: 7rem 1fr;
						gap: var(--space-m);

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

						& > div {
							display: flex;
							flex-direction: column;
							gap: var(--space-2xs);

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

	& > .empty {
		& > .hol-column {
			justify-items: start;

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

			& > .actions {
				display: flex;
				gap: var(--space-xs);
				flex-wrap: wrap;
			}
		}
	}
}