# .card-area {
  display: grid;
  grid-template-columns: repeat(, 1fr);
  grid-gap: px;
  /* Alinha os cards quando há menos itens que colunas */
  justify-items: stretch;
  align-items: stretch;
}

# .card-area .box-grid {
  {% if module.style_card.aplicar_espaco_texto == "false" %}
  ;
  {% endif %}
  ;
  background-color: rgba(, );
  border-radius: px;
  flex-direction: ;
  justify-content: ;
  display: flex;
  overflow: hidden;
  transition: all 0.3s;
  position: relative;
  gap: 20px;
  /* Garante que todos os cards tenham a mesma altura */
  height: 100%;
  min-height: 100%;
}

# .card-area .box-grid.active:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  transition: all 0.3s;
}

# .card-area .box-grid.active:hover .card-btn {
  text-decoration: none;
}

# .card-area .box-grid .card-text {
  {% if module.style_card.aplicar_espaco_texto %}
  ;
  {% endif %}
  ;
  color: ;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: -80px;
  padding: 0 20px;
}

# .card-area .box-grid .card-text p:first-child {
  margin-top: 0;
}

# .card-area .box-grid .card-text p:last-child {
  margin-bottom: 0;
}

# .card-area .box-grid .card-text ul ::marker {
  color: ;
}

# .card-area .box-grid .card-text ul {
  padding-left: 20px;
  text-align: left;
}

# .card-area .box-grid .card-text ul li ul {
  margin-bottom: 20px;
}

# .card-area .box-grid .card-text p,
# .card-area .box-grid .card-text ul,
# .card-area .box-grid .card-text ol {
  font-size: px;
}

# .card-area .box-grid .card-text p a,
# .card-area .box-grid .card-text ul a,
# .card-area .box-grid .card-text ol a {
  color: ;
  text-decoration: underline;
}

# .card-area .box-grid .card-text h3 {
  font-size: px;
  color: ;
  font-weight: bold;
  ;
  border-bottom: solid 1px ;
  margin-bottom: 20px;
}

# .card-area .box-grid .card-img svg {
  width: 5rem;
  height: 5rem;
  color: rgb(186, 186, 186);
  transition: color 0.2s ease 0s;
}

# .card-area .box-grid .card-btn {
  display: flex;
  margin-top: auto;
  color: ;
  padding: 10px 20px;
  background-color: ;
  border: solid 2px ;
  border-radius: 50px;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

# .card-area .box-grid .card-img {
  width: 100%;
  display: flex;
  justify-content: ;
}

# .card-area .box-grid .card-img img {
  {% if module.style_card.aplicar_radius_imagem %}
  border-radius: px;
  {% endif %}
}

# .card-area .box-grid .card-img,
# .card-area .box-grid .card-text {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  # .card-area {
    grid-template-columns: repeat(, 1fr);
  }
}