.ska-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 16px;

	& > * {
		position: relative;
		font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
		padding: 16px;
		background: white;
		border: 1px solid #c3c4c7;
		border-radius: 4px;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 16px;

		& > img {
			user-select: none;
			max-width: 128px;
		}

		& > .content {
			display: flex;
			flex-direction: column;
			gap: 16px;

			& > h2 {
				font-size: 1.6rem;
				line-height: 1.6rem;
				margin: 0;
			}

			& > p {
				font-size: 1rem;
				margin: 0;
			}

			& > .ska-buttons {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 8px;
				margin-top: auto;

				& > .ska-icon-button {
					padding: 0 13px;

					& > .dashicons {
						line-height: 45px;
					}
				}
			}

			& > .ska-version {
				position: absolute;
				top: 8px;
				right: 8px;
				border-radius: 4px;
				background: rgba(0, 0, 0, 0.07);
				font-size: 13px;
				padding: 2px 8px;
			}
		}
	}
}

@media (min-width: 1280px) {
	.ska-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ska-grid + table {
	border-radius: 4px;

	& > tbody {
		border-radius: inherit;

		& > tr:first-child {
			border-top-left-radius: inherit;
			border-top-right-radius: inherit;
		}

		& > tr:last-child {
			border-bottom-left-radius: inherit;
			border-bottom-right-radius: inherit;
		}

		& > tr:first-child > *:first-child {
			border-top-left-radius: inherit;
		}

		& > tr:first-child > *:last-child {
			border-top-right-radius: inherit;
		}

		& > tr:last-child > *:first-child {
			border-bottom-left-radius: inherit;
		}

		& > tr:last-child > *:last-child {
			border-bottom-right-radius: inherit;
		}
	}
}