.obras {
    width: 100%;
    padding: 5rem 0;
    background: #f5f5f5;

    .container {
        width: 90%;
        margin: 14rem auto 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        justify-content: flex-start;
    }

    .item {
        flex: 0 0 calc((100% - 4rem) / 3);

        @media (max-width: 991px) {
            flex: 0 0 calc((100% - 2rem) / 2);
        }

        @media (max-width: 768px) {
            flex: 0 0 100%;
        }

        img {
            width: 100%;
            height: 300px;
            display: block;
            object-fit: cover;
            transition: .3s;
        }

        h3 {
            padding: 1.5rem;
            text-align: center;
            font-size: 1.3rem;
            color: #111;
            font-weight: 600;
            box-shadow: 0px 0px 15px;
        }
    }
}