@use '../abstract' as *;
.grid-box {
  $grid-gap: pxToRem(24);
  --p-grid-gap: var(--grid-gap, #{$grid-gap});

  $grid-item-size: pxToRem(210);
  --p-grid-item-size: var(--grid-item-size, #{$grid-item-size});

  $grid-item-size-small-screens: pxToRem(210);
  --p-grid-item-size-small-screens: var(--grid-item-size-small-screens, #{$grid-item-size-small-screens});

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--p-grid-item-size),  1fr));
  grid-auto-rows: 1fr;
  gap: var(--p-grid-gap);
  flex-shrink: 0;

  @media #{$break1} {
    --p-grid-item-size: var(--p-grid-item-size-small-screens);
  }
}