Creando la estructura de la sección Galería de Estilos

Si quieren que se vea un poco mas fluido al momento de pasar el mouse sobre una imagen pueden usar “transition-duration: 0.3s;” y ponerle el tiempo que ustedes gusten

.gallery{
    margin: 60px;
    .gallery-images{
        @include flexCenter(row,  space-between, center);
        img{
            width: 28vw;
            height: 45vh;
            object-fit: cover;
            object-position: 5px 35%;
            border-radius: 16px;
            &:hover{
                transform: scale(1.1);
                transition-duration: 0.3s;
            }
        }
    }
}

Así fue como lleve la parte del gallery, hice que las imagenes agarren un tamaño cuadrado 😄

.gallery{
    @extend .about-us;
    &-images{
        width: 100%;
        display: flex;
        justify-content: space-between;
        img{
            aspect-ratio: 1/1;
            height: 100%;
            width: 30%;
            object-fit: cover;
            object-position: center;
            border-radius: 16px;
            transition: transform 0.2s;
            &:hover{
                transform: scale(1.1);
            }
        }
    }
}

• En la sección de button cree una animación, no se vera inmediatamente cuando la persona ingrese a la pagina pero se activara 20s después, va variando el color de conoce mas de a pocos , es sutil pero lindo.

button
                background-color: #FA9500
                width: 260px
                height: 65px
                border-radius: 35px
                color: white
                font-size: 2.3rem
                &:hover
                        transform: scale(1.1)
                animation: aumento 10s ease-in-out infinite 20s
                @keyframes aumento
                    0%
                        background-color: #FA9500
                    20%
                        background-color: #ffd6be
                        color: #FA9500
                    50%
                        background:  none
                        color: #fa6800
                    80%
                        background-color: #ffd6be
                        color: #FA9500
                    100%
                        background-color: #FA9500

• mas especifico aquí:

animation: aumento 10s ease-in-out infinite 20s
                @keyframes aumento
                    0%
                        background-color: #FA9500
                    20%
                        background-color: #ffd6be
                        color: #FA9500
                    50%
                        background:  none
                        color: #fa6800
                    80%
                        background-color: #ffd6be
                        color: #FA9500
                    100%
                        background-color: #FA9500```

Con este código se ve mejor la animación tanto al hacer hover como al quitar el hover.

img{
            width: 30vw;
            height: 45vh;
            border-radius: 16px;
            object-fit: cover;
            transition: transform 0.2s;
            &:hover{
                transform: scale(1.1);
                transition: transform 0.2s;
            }
        }

otra manera de de hacer más fluida la animación, a parte de la de transition-duration es con esta:

transition: transform 0.3s ease;

Siento que se tiene más control sobre esta forma, aunque para el ejercicio, ambas son igual de validas.

& img {
    width: clamp(250px, 25cqw, 380px);
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    @include box-shadow(1px, 10px);
    opacity: 0.8;
    transition: transform 500ms ease-in, opacity 800ms ease-in;

    &:hover {
      transform: scale(1.1);
      opacity: 1;
    }
  }

.