css – The right way to use calc appropriately?

:root {
    --offset: 30px;
  }

  .grid-cols-custom {
    /* Calculate the column widths utilizing {custom} properties and calc() */
    grid-template-columns: calc((424px / (100% - var(--offset))) * 100%)  calc((608px / (100% - var(--offset))) * 100%);

right here in a grid I’ve 2 objects one is 424px and different is 608px . I would like them to be responsive. However padding and hole creates an visible error. so i need a proportion with a calculation :

logic : ((424px/ (full width of the div – 30px )) * 100%) so our divs will at all times alter their width

please assist me . Here’s a downside instructed by css validator ‘one operand have to be a quantity’

i’ve been at this for 4 hours :{