/***** Cases single posts and archive page *****/
.single-cases {
	.cases {
		margin-bottom: 4.375rem;

		h1 {
			text-align: left;
		}

		.case-meta {
			display: grid;
			align-content: start;
			margin-bottom: 2.5rem;
			width: 100%;
			max-width: 20rem;

			.links {
				display: grid;
				gap: 1.25rem;
				margin-bottom: 2.5rem;

				a {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 500;
					color: var(--clr-main);
					line-height: 1.8;
					background-color: var(--clr-secondary);
					border: 1px solid var(--clr-gray);
					border-radius: 4px;
					padding-inline: 1em 0.75em;
					padding-block: 0.25em;

					&::after {
						border-left-color: var(--clr-main);
					}

					&:hover,
					&:focus {
						color: var(--clr-secondary);
						background-color: var(--clr-main);
						border-color: var(--clr-main);
						text-decoration: none;

						&::after {
							border-left-color: var(--clr-secondary);
						}
					}
				}
			}

			h2 {
				font-weight: 500;
				font-size: 1.125rem;
				margin-bottom: 0.5em;
			}

			li {
				padding-left: 1.875rem;
			}

			.contact {
				> * {
					display: block;
				}

				.email {
					font-weight: 500;
					margin-bottom: 1.5em;
					padding-left: 1.875rem;
					background-image: url(../images/icon-email-black.png);
					background-repeat: no-repeat;
					background-position: left center;
				}
			}
		}

		@media (width >= 62.5rem) { /* 1000px */
			& {
				display: grid;
				grid-template-columns: 20rem 1fr;
				grid-template-rows: auto 1fr;
				grid-template-areas:
					'meta heading'
					'meta textContent';
				column-gap: 3.75rem;

				h1 {
					grid-area: heading;
					margin-top: 0;
				}

				.case-meta {
					grid-area: meta;

					.links {
						margin-bottom: 3.75rem;
					}
				}

				.text-content {
					grid-area: textContent;
				}
			}
		}

		@media (width >= 75rem) { /* 1200px */
			& {
				column-gap: 7.375rem;
			}
		}
	}
}

.post-type-archive-cases {
	--max-width: 90rem;

	.dc-content {
		padding-inline: var(--padding-rl);
	}

	.cases {
		h2 {
			font-weight: 500;
			font-size: clamp(1.875rem, 3.5vw, 2.25rem);
			text-align: center;
			margin-block: 0 2.5rem;
		}
	}

	@media (width >= 50rem) { /* 800px */
	}
}