#about {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Alinha os itens com relaccao ao maior*/
  width: 100%;
  /*border: solid blue;*/
  gap: var(--space-md); 

  background-color: var(--color-bg);

}
.about-container {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
}

.about-title {
  width: 100%;
  font-size: var(--font-size-lg);
  text-align: center;
  font-family: var(--font-family-base);
  color: var(--color-text);
}
.about-wrapper{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  flex-direction: row; 
  align-items: stretch; 
  justify-content: center;
  gap: var(--space-lg);
  
} 

.about-card {
  background-color: var(--color-bg);
  border: solid var(--color-border);
  overflow: hidden;
  gap: var(--space-md);
  box-shadow: var(--shadow-lg) ;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;           
  justify-content: top;               
} 

.about-image {
  width: 100%;
  aspect-ratio: 2.1 / 2; 
  object-fit: cover;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.about-card-content {
  display: flex;
  flex-direction: column;
  padding:0 var(--space-md);
  gap: var(--space-sm);
  padding-bottom: var(--space-md) ;
}

.about-sub-title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  color: var(--color-text);
  display: flex;
  gap: var(--space-sm);
  align-items: center; 
}


.about-text {
  text-align: left;
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);

}
.about-subtitle-icon{
  font-size: var(--font-size-lg);
  color:  var(--color-primary); 
}