.wp-block-tableberg-table {
	td {
		padding-block: 24px;

		@media (width <= 700px) {
			padding-block: 16px;
			padding-inline: 0;
		}
	}

	ul {
		list-style-type: square;
		padding-left: 10px;
	}

	li {
		margin-bottom: 8px;
		line-height: 1.5;

		&:last-child {
			margin-bottom: 0;
		}
	}

	p:is(:not(.a.a)) {
		margin: 0;
	}

	&.header-column {
		table {
			table-layout: fixed;
			width: 100%;
		}


		td:first-child {
			font-size: 1rem;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			padding-left: 0;
			padding-right: 24px;
		}
	}

	&.no-vertical-borders {
		tr:first-child td {
			&:is(.a, :not(.a)) {
				border-top-width: 1px !important; /* Plugin styles use !important, so we have to as well. */
				border-top-style: solid !important;
			}
		}

		tr:last-child td {
			&:is(.a, :not(.a)) {
				border-bottom-width: 1px !important;
				border-bottom-style: solid !important;
			}
		}

		td {
			/* Increase specificity. */
			&:is(.a, :not(.a)) {
				border-left-width: 0;
				border-right-width: 0;
			}
		}
	}

	@media (width <= 700px) {
		table, tbody, tr, td {
			display: block;
		}

		td:first-child:is(.a.a.a, :not(.a.a.a)) {
			border-bottom-width: 0 !important;
			padding-bottom: 0;
		}

		td:nth-child(n + 2):is(.a.a.a, :not(.a.a.a)) {
			border-top-width: 0 !important;
		}
	}
}

.wp-block-group:where(.is-layout-grid).grid-3-to-2 {
	--columns: 3;
	gap: 32px 48px;
	grid-template-columns: repeat(var(--columns), minmax(0, 1fr));

	@container (width < 500px) {
		--columns: 2;
		gap: 24px;
	}

	h3 {
		font-family: var(--font-serif);
		font-size: 1.25rem;
		font-weight: 410;
		line-height: 1.4;
		margin-bottom: 10px;
	}

	p {
		font-weight: 400;
		font-size: 0.875rem;
		margin-block: 10px;
	}
}

.has-black-color { color: var(--black)  }
.has-black-background-color { background-color: var(--black) }
.has-medium-gray-color { color: var(--medium-gray)  }
.has-medium-gray-background-color { background-color: var(--medium-gray) }
.has-cool-gray-color { color: var(--cool-gray)  }
.has-cool-gray-background-color { background-color: var(--cool-gray) }
.has-light-gray-color { color: var(--light-gray)  }
.has-light-gray-background-color { background-color: var(--light-gray) }
.has-platinum-gray-color { color: var(--platinum-gray)  }
.has-platinum-gray-background-color { background-color: var(--platinum-gray) }
.has-white-color { color: var(--white)  }
.has-white-background-color { background-color: var(--white) }
/* The following variable names do not match the class names. This is
unfortunate but intentional. */
.has-dark-blue-color { color: var(--dark-gray)  }
.has-dark-blue-background-color { background-color: var(--dark-gray) }
.has-dark-green-color { color: var(--green)  }
.has-dark-green-background-color { background-color: var(--green) }
.has-darker-green-color { color: var(--darker-green)  }
.has-darker-green-background-color { background-color: var(--darker-green) }