.image-card-container
{
  --size: calc(var(--material-gallery-width) / 5 - 6px);
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  position: relative;
  border-radius: 0.25rem;
  justify-self: center;
  margin: 3px;
}

.image-card-image
{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  object-fit: cover;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.image-card-image:hover
{
  cursor: pointer;
}

@media (max-width: 1366px)
{
  .image-card-container {
    --size: calc(var(--material-gallery-width) / 4 - 6px);
    width: var(--size);
    height: var(--size);
  }
}

@media (max-width: 991px)
{
  .image-card-container {
    --size: calc(var(--material-gallery-width) / 3 - 6px);
    width: var(--size);
    height: var(--size);
  }
}

@media (max-width: 600px)
{
  .image-card-container {
    --size: calc(var(--material-gallery-width) / 2 - 6px);
    width: var(--size);
    height: var(--size);
  }
}

@media (max-width: 376px)
{
  .image-card-container {
    --size: calc(var(--material-gallery-width) - 6px);
    width: var(--size);
    height: var(--size);
  }
}