/* 2. MOLDURA PERSONALIZADA AO REDOR DA CAPA */
.view-tres-cards .views-col .views-field-field-image,
.view-tres-cards .views-col .views-field:first-child {
  display: flex !important;              /* Ativa o Flexbox para alinhar o conteúdo */
  justify-content: center !important;     /* Centraliza a imagem horizontalmente */
  align-items: center !important;         /* Centraliza a imagem verticalmente */
  width: 100% !important;
  height: 180px !important; 
  overflow: hidden !important;
  border-radius: 10px !important;         /* Moldura externa arredondada em 10px */
  
  /* Configuração da Moldura (Efeito Passepartout) */
  border: 3px solid #f1f5f9 !important; 
  outline: 1px solid #cbd5e1 !important; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  
  transition: border-color 0.2s ease, outline-color 0.2s ease !important;
}

/* COMPORTAMENTO DA MOLDURA NO HOVER (PASSAR O MOUSE NO CARD) */
.view-tres-cards .views-col:hover .views-field-field-image,
.view-tres-cards .views-col:hover .views-field:first-child {
  border-color: #e0f2fe !important;
  outline-color: #0284c7 !important;
}

/* AJUSTA A IMAGEM DENTRO DA MOLDURA DA GRADE */
.view-tres-cards .views-col img {
  width: 100% !important;                 /* Força a imagem a ocupar toda a largura */
  height: 100% !important;                /* Força a imagem a ocupar toda a altura */
  object-fit: cover !important;           /* Preenche todo o espaço retangular sem distorcer */
  border-radius: 15% !important;          /* Arredonda os cantos de forma suave e proporcional, eliminando a ponta */
}