.cookies-per-purpose {
     display: grid;
     border: 1px solid #dadada;
     background-color: #dadada;
     gap: 1px;
     color: #3b3b3d;
     font-size: 14px;
     line-height: 22px;
 }


 .cookies-per-purpose div {
     padding: 15px;
     background-color: #fff;
     word-break: break-word;
 }

 .cookies-per-purpose .purpose h4 {
     font-size: 15px;
     margin: 5px 0;
     padding: 13px 15px;
     font-weight: 400;
     line-height: 20px;
 }

 .cookies-per-purpose h5 {
     font-size: 14px;
     line-height: 20px;
     margin: 0;
     padding: 10px 0;
     font-weight: 400;
 }




 @media (min-width:768px) {
     .cookies-per-purpose {
         grid-template: "purpose purpose purpose"
             "header1 header2 header3" auto;
     }

     .cookies-per-purpose .purpose {
         grid-area: purpose;
     }

     .cookies-per-purpose .name-header {
         grid-area: header1;
     }

     .cookies-per-purpose .retention-header {
         grid-area: header2;
     }

     .cookies-per-purpose .function-header {
         grid-area: header3;
     }

     .cookies-per-purpose .name-header,
     .cookies-per-purpose .retention-header,
     .cookies-per-purpose .function-header {
         background-color: #f7f7f7;
     }
 }

 @media (max-width:767px) {
     .cookies-per-purpose {
         grid-template-columns: 120px 1fr;
     }

     .cookies-per-purpose .purpose {
         grid-column: span 2;
     }

     .cookies-per-purpose .purpose h4 {
         padding: 5px;
     }

     .cookies-per-purpose h5 {
         padding: 3px 0;
     }

     .cookies-per-purpose div:nth-child(12n+2),
     .cookies-per-purpose div:nth-child(12n+4),
     .cookies-per-purpose div:nth-child(12n+6) {
         background-color: #f7f7f7;
     }
 }