I am new to React and I am trying to implement Mantine components into my Project. One of these components is the Carousel component which is frozen in my scenario. I really don’t know why and I hope someone knows the problem. I think it is related to css.

CardsCarousel.tsx:

import { Carousel } from '@mantine/carousel';
import { useMediaQuery } from '@mantine/hooks';
import { Image, Paper, Text, Title, Button, useMantineTheme, rem } from '@mantine/core';
import classes from './CardsCarousel.module.css';

interface CardProps {
  image: string;
  title: string;
  category: string;
}

function Card({ image, title, category , onClick }: CardProps) {
  return (
    <Button className={classes.card} style={{ 
      background: 'rgba(0, 0, 0, 0.7)', 
      padding: '0',
      borderRadius: '0',
      objectFit: 'fill',
      height: '100%',
    }
    }onClick={onClick}>
      <Image src={image} radius="0px" className={classes.image}/>
    </Button>
  );
}

const data = [
  {
    image:
      'https://docs.fivem.net/vehicles/baller3.webp',
    title: 'nnnnn',
    category: 'nature',
    onClick: () => alert('baller3'),
  },
  ...
  {
    image:
      'https://docs.fivem.net/vehicles/tenf2.webp',
    title: 'Hawaii beaches review: better than you think',
    category: 'beach',
    onClick: () => alert('tenf2'),
  },
];

export function CardsCarousel() {
  const theme = useMantineTheme();
  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
  const slides = data.map((item) => (
    <Carousel.Slide key={item.title}>
      <Card {...item} />
    </Carousel.Slide>
  ));

  return (
    <Carousel slideSize="18%" height={"100%"} align="start" slideGap="md" dragFree withIndicators slidesToScroll={5}>
      {slides}
    </Carousel>
  );
}

CardsCarousel.module.css:

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  background-size: cover;
  background-position: center;
  flex-basis: auto;
  transition: border-color 0.3s ease;
  cursor: pointer;
}
.card:hover {
  border: 4px solid white;
}

.image {
  transition: transform 0.3s ease;
}

.card:hover .image {
  transform: scale(1.05);
  bottom: 5px;
  left: 5px;
  color: white;
}

and in my app.css the carousel is defined as c in an grid template:

.app-container {
  display: grid;
  user-select: none;
  grid-template-areas: 
    "a b"
    "a c"
  ;
  grid-template-columns: 10% 90%;
  grid-template-rows: 80% 20%;
}

.carousel-grid {
  grid-area: c;
}

I tried to change the CardsCarousel.tsx style from .card in CardsCarousel.module.css and if I set the carousel to loop mode the carousel is frozen and another one shows up above it. The carousel is working like intended if I zoom in/out in the browser.