responsive css grid div that has no width and no background-size when using calc

Question

I try to implement a responsive CSS grid with 2 images displayed on half of the total width. As it is implemented, when I go under 400px, it should display the two images on one column and 2 rows with a width of calc(100% - 20px) and a margin left and right of 10px. But it renders with a width of 2px (the borders) and background-size: calc(100% -20px); width: calc(100% -20px); are not taken into account.

Here is the code

<div class="firstPage width100percent">
    <div class="homePageImage4">
      <div class="card1">
      </div>
   </div>
   <div class="homePageImage5">
      <div class="card1">
      </div>
  </div>
</div>
and 
@media screen and (max-width: 400px) {

  .firstPage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    grid-template-areas: "homePageImage4"
                         "homePageImage5";
    justify-items: center;
  }
}

@media screen and (min-width: 400px) {

  .firstPage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: repeat(1, auto);
    grid-template-areas: "homePageImage4 homePageImage5";
    position: relative;
  }
}

  .homePageImage4 {
    grid-area: homePageImage4;
    background-image: url("https://i.postimg.cc/vZmRKG41/home-Page-Image4.png");
    background-repeat: no-repeat;
    background-position: 0px -130px;
    margin-bottom: 37px;
    background-size: calc(100% -20px);
    width: calc(100% -20px);
    height: 626px;
    position: relative;
    border: 1px solid black;
  }

  .homePageImage5 {
    grid-area: homePageImage5;
    background-image: url("https://i.postimg.cc/nz4wzWsb/home-Page-Image5.png");
    background-repeat: no-repeat;
    background-size: calc(100% -20px);
    width: calc(100% -20px);
    height: 626px;
    margin-bottom: 37px;
    position: relative;
    border: 1px solid black;
  }


  .card1 {
    box-shadow: 0px 3px 6px #00000029;
    position: absolute;
    height: 442px; 
    width: calc(100% - 20px); 
    top: 184px; 
  }

.width100percent {
  width: 100%;
}

and here is the fiddle: https://jsfiddle.net/flamant/9er7mh6v/68/

Answer 1

In calc there must be space between numbers and operator

https://jsfiddle.net/4g7ud6s0/1/

  background-size: calc(100% - 20px);
  width: calc(100% - 20px);