:root{
    --pros:#01377d;
    --cons:#009dd1;
    --pricing:#5ba100;
    --border:#cfd8dc;
    --row:#f4f4f4;
    --text:#333;
  }
  .comparison-wrap{
    max-width:1000px;
    margin:40px auto;
    overflow:hidden;
  }

  /* Header */
  .comparison-header{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
	background: #ffffff;
    padding:18px 0;
    text-align:center;
  }

  .tag {
    display: inline-block;
    padding: 12px 26px;
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
    font-size: 14px;
}

  .pros{ background:var(--pros); }
  .cons{ background:var(--cons); }
  .pricing{ background:var(--pricing); }

  /* Rows */
  .comparison-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	border-top: 1px solid var(--border);
	position: relative;
}
.comparison-row::before {
    content: '';
    background: linear-gradient(90deg, rgba(229, 229, 229, .3) 0%, rgb(91 161 0 / 25%) 44.71%, rgba(229, 229, 229, .3) 100%);
    height: 1px;
    width: 100%;
    position: absolute;
    top: 0;
}
  .comparison-row:nth-child(even){
    background:var(--row);
  }

  .cell {
    padding: 12px 20px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

  /* Responsive */
  @media (max-width: 768px){

    .comparison-header{
      display:none;
    }

    .comparison-row{
      grid-template-columns:1fr;
      border-top:2px solid var(--border);
    }

    .cell{
      border-bottom:1px solid var(--border);
      padding:14px 16px;
    }

    .cell::before{
      display:block;
      font-weight:700;
      margin-bottom:6px;
      color:#555;
    }

    .comparison-row .cell:nth-child(1)::before{ content:"Pros"; color:var(--pros); }
    .comparison-row .cell:nth-child(2)::before{ content:"Cons"; color:var(--cons); }
    .comparison-row .cell:nth-child(3)::before{ content:"Pricing"; color:var(--pricing); }
  }