.ambientes {
    padding: 90px 10px;
}

.ambientes-grid {
    display: grid;
    gap: 30px;

    h3 {
        max-width: 642px;
        opacity: 0;
        transform: translateY(50px);
    }

    @media only screen and (max-width:550px) {
        h3 {
            text-align: center;
        }
    }

    .ambientes-content {
        @include flex(15px);
        flex-wrap: wrap;

        div {
            display: grid;
            gap: 10px;
        }

        img {
            opacity: 0;
            transform: translateY(50px);
        }
    }

    &.active {
        h3 {
            animation: sobe 1.5s forwards;
        }

        .ambientes-content {
            img {
                animation: sobe 1.5s forwards;

                &:nth-child(1) {
                    animation-delay: .2s;
                }

                &:nth-child(3) {
                    animation-delay: .8s;
                }
            }

            div:nth-child(2) {
                img:nth-child(1) {
                    animation-delay: .4s;
                }

                img:nth-child(2) {
                    animation-delay: .6s;
                }
            }

            div:nth-child(4) {
                img:nth-child(1) {
                    animation-delay: 1s;
                }

                img:nth-child(2) {
                    animation-delay: 1.2s;
                }
            }
        }
    }
}