#agreementPage {
	width: 100%;
	max-width: 1024px;
	min-height: 60vh;
	margin: 0 auto;
	padding: 80px 0;
	display: flex;
	flex-direction: column;
	gap: 32px;

	.agreement__cards {
		display: inline-grid;
		row-gap: 16px;
		column-gap: 16px;
		align-self: stretch;
		grid-template-rows: repeat(2,fit-content(100%));
		grid-template-columns: repeat(3,minmax(0,1fr));

		.agreement__card {
			display: inline-flex;
			padding: 20px;
			flex-direction: column;
			align-items: flex-start;
			align-self: stretch;
			justify-self: stretch;
			border-radius: 12px;
			border: 1px solid var(--border-high);
			background: var(--base-greengrey-a-50);
			text-decoration: none;

			.agreement__card-heading {
				color: var(--text-base-primary);
				font: var(--font-body-med-md);
				padding-bottom: 12px;
			}

			.agreement__card-subheading {
				color: var(--text-base-tertiatry);
				font: var(--font-body-reg-xs);
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			ws-icon {
				margin-top: auto;
				align-self: flex-end;
				transition: 0.25s ease-out;
			}

			&:hover {
				background: var(--base-greengrey-a-100);
				ws-icon {
					transform: translateX(4px);
				}
			}
		}
	}
}