@charset "utf-8";

/* PROJECT DETAILS */
	.project-details {
		display: grid;
		grid-gap: var(--margin-block);
		margin: var(--margin-block) auto;
		}
	.project-details-meta {
		display: grid;
		font-size: var(--text);
		grid-gap: 1rem;
		grid-template-columns: 12rem 1fr;
		}
	.project-details-meta + .project-details-meta {
		margin-top: 1.5rem;
		}
	.project-details-meta > span {
		font-style: italic;
		}
	.project-details-meta > div {
		font-weight: 700;
		}
	.project-details-meta > div span {
		color: var(--color-medium);
		font-weight: 400;
		}
	@media (min-width: 60em) {
		.project-details {
			grid-gap: var(--margin-normal);
			grid-template-columns: repeat(2, 1fr);
			}
	}

/* PROJECTS */
	.projects {
		display: grid;
		grid-gap: var(--margin-block);
		margin: var(--margin-block) auto;
		}
	.projects-item {
		display: grid;
		grid-gap: 1rem;
			grid-template-rows: min-content 1fr;
		}
	.projects-image {
		border-radius: var(--radius);
		display: block;
		}
	.projects-name {
		display: block;
		font-size: var(--head-5);
		font-weight: var(--heavy);
		text-wrap: balance;
		}
	.projects-name i {
		color: var(--color-arrow);
		padding-left: 1rem;
		}
	.projects-vertical .projects-name {
		color: var(--color-header);
		}
	.projects-vertical a.projects-name:hover,
	.projects-vertical a.projects-name:focus {
		color: var(--color-link);
		}
	.projects-vertical .projects-name {
		font-size: var(--head-3);
		}
	.projects-services {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		margin-top: 1rem;
		}
	.projects-services a {
		background-color: var(--background);
		border-radius: var(--radius);
		color: var(--color-text);
		display: block;
		font-size: var(--text-sub-3);
		padding: 0.5rem 1em;
		}
	.projects-services a:hover,
	.projects-services a:focus {
		background-color: var(--color-button-hover);
		color: var(--color-button-hover-text);
		}
	.projects-meta {
		font-size: var(--text);
		margin-top: 1rem;
		}
	.projects-text {
		font-size: var(--text-sub-1);
		line-height: 1.4em;
		margin-top: 1rem;
		}
	.projects-button {
		margin-top: 2rem;
		}
	@media (min-width: 60em) {
		.projects-cards,
		.projects-vertical .projects-item {
			grid-template-columns: repeat(2, 1fr);
			}
		.projects-cards .projects-item {
			grid-gap: 2rem;
			}
		.projects-vertical .projects-item {
			align-items: center;
			grid-gap: var(--margin-block);
			grid-template-rows: 1fr;
			}
		.projects-vertical .projects-item > .projects-info {
			order: 1;
			}
		.projects-vertical .projects-item > .projects-image {
			order: 2;
			}
	}
	@media (min-width: 80em) {
		.projects-cards .projects-name {
			font-size: var(--head-4);
			}
		.projects-vertical .projects-name {
			font-size: var(--head-2);
			}
	}