.card-container
{
  --width: calc(100vw/3);
  --height: calc(var(--width) * 1 / 2);
  max-width: var(--width);
  width: var(--width);
  height: var(--height);
  overflow: hidden;
  position: relative;
  margin: 0.5rem auto;
  border-radius: 0.25rem;
}

.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;
}

.titleText
{
  font-size: 1.7rem;
  letter-spacing: 2px;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
  width: 100%;
  padding: 1.5rem;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  color: #fff;
}

.titleContainer::after
{
  position: absolute;
  content: '';
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
}

@media (max-width: 1366px)
{
  .card-container
  {
    --height: calc(var(--width) * 2 / 3);
  }
}

@media (max-width: 900px)
{
  .card-container
  {
    height: var(--width);
  }
}

@media (max-width: 800px)
{
  .titleText
  {
    font-size: 1.4rem;
    padding: 1.2rem;
  }
}

@media (max-width: 640px)
{
  .card-container
  {
    --width: 80vw;
    --height: calc(var(--width) * 1 / 2);
    max-width: var(--width);
    width: var(--width);
    height: var(--height);
  }
}

@media (max-width: 414px)
{
  .card-container
  {
    --width: 90vw;
  }
  
  .titleText
  {
    font-size: 1.3rem;
    padding: 1rem;
  }
}