<section class="portfolio">
        <div class="container">
            <div class="line portfolio__line"></div>
            <span class="subtitle portfolio__subtitle">Последние работы</span>
            <h1 class="portfolio__title">Портфолио</h1>
            <div class="portfolio__wrap">
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img lazyload" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img lazyload" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img lazyload" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img lazyload" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img lazyload" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
                <div class="portfolio__case">
                    <button class="portfolio__button">Подробнее</button>
                    <div class="portfolio__dark"></div>
                    <img class="portfolio__img lazyload" src="https://www.meda.ee/images/2/7/cuteftp-8-professional-v8-3-4-007-including-crack-h33t-iahq76.jpg" alt="">
                </div>
            </div>
        </div>
    </section>

.portfolio
    &__line
        margin-bottom: 6px
    &__title
        margin-top: 30px
    &__wrap
        display: flex
        flex-wrap: wrap
        justify-content: space-between
        width: 1216px
        margin-top: 40px
    &__case
        width: 392px
        height: 220px
        margin-top: 20px
        cursor: pointer
        background: none
        overflow: hidden
        position: relative
        &:hover
            .portfolio
                &__button
                    right: 5%
    &__img
        position: absolute
        z-index: -2
        transition: 0.2s
        width: 100%
        height: 100%
        object-fit: cover
        &:hover
            filter: brightness(50%)
    &__dark
        width: 392px
        height: 220px
        position: absolute
        z-index: -1
        background: #000050
        display: none
    &__button
        position: absolute
        margin: auto
        display: block
        right: -50%
        transition: right .3s ease
        top: 10%
.active
    display: block