/*=========================
	CARDS IMAGE BLOCK
=========================*/

.block-cards-image .title {
  text-align: center;
}
.block-cards-image .cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--space-4);
  row-gap: var(--space-5);
}
.block-cards-image .card {
  z-index: 0;
  border: 1px solid #BFBEBF;
  border-radius: 0;
}
.block-cards-image .card:hover {
  background-color: var(--color-a-60);
  color: var(--color-a);
}

.block-cards-image .card .link{
  height: 100%;
}

.block-cards-image .card .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-3);
}
.block-cards-image .card img {
  height: 220px;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.3s ease; 
}
.block-cards-image .card:hover img {
  filter: grayscale(0%); 
}
.block-cards-image .card .content h3 {
  margin-bottom: var(--space-4);
}


@media only screen and (max-width: 992px) {
  .block-cards-image .container .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .block-cards-image .card img {
    height: 350px;
  }
}

@media only screen and (max-width: 578px) {
  .block-cards-image .container .cards {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .block-cards-image .card img {
    height: 280px;
  }
}