.table-custom {
	overflow: auto;

	@include mobile {
		margin: 0 -16px;
		padding: 0 16px;
		box-sizing: border-box;
	}

	table {
		display: grid;
		grid-template-columns: repeat(100, max-content);
		border-spacing: 0px;
		border-collapse: collapse;
	}

	thead,
	tbody,
	tr {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
	}

	thead {
		color: $color-white;
		border-radius: 14px;
		background-color: $color-green;

		@include desktop {
			border-radius: 16px;
		}

		th {
			display: flex;
			align-items: center;
			height: 34px;
			font-size: 12px;
			line-height: 14px;

			@include desktop {
				height: 40px;
				font-size: 14px;
				line-height: 16px;
			}
		}
	}

	td,
	th {
		display: block;
		text-align: left;
		white-space: nowrap;
		padding: 0 14px;

		@include desktop {
			padding: 0 16px;
		}
	}

	td {
		padding: 10px 14px;
		font-size: 14px;
		line-height: 16px;

		@include desktop {
			padding: 12px 16px;
			font-size: 16px;
			line-height: 18px;
		}
	}

	td[cellspan='2'] {
		grid-column: span 2;
	}

	td[cellspan='3'] {
		grid-column: span 3;
	}

	tr:nth-child(even) {
		border-radius: 14px;
		background-color: $color-surface;
	}
}