.case {
	&-container {
		display: grid;
		gap: 6.4rem;
		grid-template-columns: repeat(1, 1fr);
		@include media-min($medium) {
			gap: 64px 40px;
			grid-template-columns: repeat(2, 1fr);
		}
		@include media-min(1200px) {
			grid-template-columns: repeat(4, 1fr);

			&[data-num-cols="1"],
			&[data-num-cols="2"],
			&[data-num-cols="3"] {
				.case-title {
					grid-column: auto;
				}
			}
			&[data-num-cols="5"] {
				.case-framer:nth-of-type(2){
					grid-column-start: 4;
				}
			}
		}

		.case-title {
			@include media-min($medium) {
				grid-column: span 2 / span 2;
			}
		}

		h2 {
			font-size: 4rem;
			font-weight: 700;
			line-height: 48px;
			color: #fff;
			@include media-min($medium) {
				font-size: 5rem;
				line-height: 56px;
			}
		}

		h4 {
			color: #fff;
		}

		.desc {
			font-size: 22px;
			font-weight: 300;
			line-height: 28px;
			color: #ffffffa6;
		}
	}
	&-card {
		display: block;
		text-decoration: none;
		margin-top: 0;
		transition: all var(--default-transition-params);
		&__title {
			color: #fff;
			font-size: 24px;
			font-weight: 700;
			line-height: 30px;
			margin-top: 28px;
			margin-bottom: 1.6rem;
		}
		img {
			height: 3rem;
			width: auto;
			margin-top: 8px;
		}
		p {
			color: #a2adb9;
			margin-bottom: 1.6rem;
		}
		&:hover {
			transform: translateY(-12px);
			box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
			.button-link {
				&:after {
					background-color: #fff;
					border-radius: 50%;
					color: #000;
					transform: rotate(45deg);
				}
			}
		}
	}
}