#about1 {
    background-color: var(--hero-bg-color, rgb(189, 182, 176));
}

#about1 h1 {
    color: black;
}

.hero-images#image-about1 {
    /* Margem para o contêiner que envolve a imagem */
    margin-top: 50px; 
    margin-bottom: 70px; 
}

.hero-images#image-about1 img {
    /* 1. Largura: Definimos um tamanho fixo menor */
    width: 300px; /* Altere este valor para 300px ou o que for 1/3 menor */
    
    /* 2. Altura: Definimos uma altura maior (o dobro da largura, por exemplo) */
    height: 600px; /* Defina a altura desejada, aqui é o dobro da largura */
    
    /* 3. Proporção: Garante que a imagem preencha o espaço sem distorcer, focando no centro e cortando as bordas */
    object-fit: cover;

    /* 4. Opções de Display */
    display: block;
    margin: 0 auto;
}

/* ======================================= */
/* MEDIA QUERY: AJUSTE DA IMAGEM NA SEÇÃO ABOUT (MAX-WIDTH: 600px) */
/* ======================================= */
@media (max-width: 600px) {

    /* 1. Contêiner da Imagem: Garante que ele ocupe 100% da largura do contêiner pai */
    .hero-images#image-about1 {
        /* Centraliza a imagem no celular, se for menor que 100% */
        text-align: center;
        width: 100%;
        margin: 10px 0; /* Adiciona espaço acima e abaixo da imagem */
    }

    /* 2. A IMAGEM: Aumenta a largura real da imagem (dani.png) */
    .hero-images#image-about1 img {
        /* Define a largura para ocupar, por exemplo, 80% da largura da viewport (tela) */
        /* Ajuste o valor '80vw' se quiser que ela fique maior ou menor */
        width: 50vw; 
        
        /* Garante que a altura se ajuste para não distorcer a imagem */
        height: 50vw; 
        
        /* Garante que a imagem fique centralizada dentro de seu contêiner (se for um elemento bloco) */
        display: block;
        margin: 0 auto;
    }
}