table

<style>

	.compare-table--wrapper {
		background: #f5f5f5;
		max-width: 740px;
		border-radius: 24px;
		margin: 0 auto;
	}
	.compare-table {
		border-collapse: separate;
		margin-bottom: 0;
	}

	.compare-table,
	.compare-table th,
	.compare-table td {
		border: none;
	}

	.compare-table tr {
		box-shadow: 1px 0 #ccc;
	}

	.compare-table tr:last-child {
		box-shadow: none;
	}

	.table--headers > .table--item--dnb,
	.table--headers > .table--item--dna {
		border-top: 3px solid transparent;
		border-radius: 24px 24px 0 0;
		border-spacing: 0;
		position: relative;
		padding-top: 48px;
   }

	.selected-dnb .table--headers > .table--item--dnb,
	.selected-dna .table--headers > .table--item--dna {
	    border-color: #ffce34;
	}

	.compare-table .table--item--dnb,
	.compare-table .table--item--dna {
		text-align: center;
	    border-left: 3px solid transparent;
	    border-right: 3px solid transparent;
	}

	.selected-dnb .table--item--dnb,
	.selected-dna .table--item--dna {
		border-color: #ffce34;
	}

	.table--footer--links > .table--item--dnb,
	.table--footer--links > .table--item--dna {
	    border-bottom: 3px solid transparent;
		border-radius: 0 0 24px 24px;
	    border-spacing: 0;
	    padding-bottom: 48px;
	}

	.selected-dnb .table--footer--links > .table--item--dnb,
	.selected-dna .table--footer--links > .table--item--dna {
		border-color: #ffce34;
	}

	.selected-dnb .table--item--dnb .selection-link,
	.selected-dna .table--item--dna .selection-link,
	.selection-text {
		display: none;
	}

	.selected-dnb .table--item--dnb .selection-text,
	.selected-dna .table--item--dna .selection-text {
		display: inline;
	}

	.selection-text {
		color: #626262;
	}

	.badge--text {
		background: #ffce34;
		padding: 2px 10px;
		border-radius: 10px;
		font-weight: 400;
	}

	.badge--text--selected {
		position: absolute;
		top: -14px;
		left: 50%;
		transform: translate(-50%, 0);
		display: none;
	}

	.selected-dnb .table--item--dnb .badge--text--selected,
	.selected-dna .table--item--dna .badge--text--selected {
		display: inherit;
	}
</style>

{% assign BreedIDName = 'Breed ID DNA Kit' %}
{% assign BreedHealthName = 'Breed + Health DNA Kit' %}

<div class="compare-table--wrapper">
<table class="compare-table">
	<tbody>
		<tr class="table--headers">
			<td></td>
			<th scope="col" class="table--item--dnb">
				<span class="badge--text badge--text--selected">Selected</span>
				{{ BreedIDName }}
			</th>
			<th scope="col" class="table--item--dna">
				<span class="badge--text badge--text--selected">Selected</span>
				{{ BreedHealthName }}
			</th>
		</tr>
		<tr>
			<th scope="row">Price</th>
	        <td class="table--item--dnb">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
		</tr>
		<tr>
			<th scope="row">Overview</th>
	        <td class="table--item--dnb">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
		</tr>
		<tr>
			<th scope="row">Breed Type</th>
	        <td class="table--item--dnb">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
		</tr>
		<tr>
			<th scope="row">Breed Breakdown</th>
	        <td class="table--item--dnb">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
		</tr>
	    <tr>
	        <th scope="row">Ancestry</th>
	        <td class="table--item--dnb">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	    </tr>
	    <tr>
	        <th scope="row">Relative Finder</th>
	        <td class="table--item--dnb">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	    </tr>
	    <tr>
	        <th scope="row">Predicted Adult Weight</th>
	        <td class="table--item--dnb">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	    </tr>
	    <tr>
	        <th scope="row">Talk with a vet geneticist</th>
	        <td class="table--item--dnb">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	    </tr>
	    <tr>
	        <th scope="row">Health screening</th>
	        <td class="table--item--dnb">
	            <div class="red-x" role="presentation"></div>
	            <span class="show-for-sr">Not included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	    </tr>
	    <tr>
	        <th scope="row">Trait Insights</th>
	        <td class="table--item--dnb">
	            <div class="red-x" role="presentation"></div>
	            <span class="show-for-sr">Not included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	    </tr>
	    <tr>
	        <th scope="row">Measure Genetic Diversity</th>
	        <td class="table--item--dnb">
	            <div class="red-x" role="presentation"></div>
	            <span class="show-for-sr">Not included</span>
	        </td>
	        <td class="table--item--dna">
	            <div class="green-check" role="presentation"></div>
	            <span class="show-for-sr">Included</span>
	        </td>
	    </tr>
	    <tr class="table--footer--links">
	        <td></td>
	        <td class="table--item--dnb">
	            <a class="selection-link" href="#">See Full Details <span class="show-for-sr">{{ BreedIDName }}</span></a>
				<span class="selection-text">Selected</span>
			</td>
	        <td class="table--item--dna">
	            <a class="selection-link" href="#">See Full Details <span class="show-for-sr">{{ BreedHealthName }}</span></a>
				<span class="selection-text">Selected</span>
	        </td>
	    </tr>
	</tbody>
</table>
</div>