Make tile width responsive

[florianbepunkt]

Very clean neat, thank you. Do you have an idea how to improve this to make the tile-width more responsive, for example using media queries?

Edit:

What works is something like this, but for browser support I would prefer to not use :root { --vars } at all.

:root {
  /* Tile Dimensions */
  --carousel-tile-spacing: 10px;
  --carousel-tile-width: 70%;
  --carousel-tile-height: calc(var(--carousel-tile-width) / (750 / 1423));

  /* Growth Factor */
  --carousel-growth-factor: 1.15;

  /* Fade to Opacity */
  --carousel-fade-opacity: 0.25;
  --carousel-normal-opacity: 1;

  /* Automatic Offsets - DO NOT ALTER */
  --carousel-offset-left: calc(
    -1 * (var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1) / 2)
  );
  --carousel-offset-right: calc(
    var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1)
  );

  /* Transition Speeds */
  --carousel-transition-1: 1s;
  --carousel-transition-2: 0.5s;
  --carousel-transition-3: 0.3s;
}

@media (min-width: 480px) {
  :root {
    --carousel-tile-width: 40%;
    --carousel-tile-height: calc(var(--carousel-tile-width) / (750 / 1423));
  }
}

@media (min-width: 768px) {
  :root {
    --carousel-tile-width: 30%;
    --carousel-tile-height: calc(var(--carousel-tile-width) / (750 / 1423));
  }
}