.portfolio {
    position: relative;
    .headline {
        position: absolute;
        right: 0;
        .section-meta {
            max-width: 450px;
        }
    }
    .items {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-columns: repeat(2, auto);
        gap: 60px;
        align-items: center;
        .item {
            position: relative;
            width: 100%;
            .img {
                position: relative;
                border-radius: 40px;
                overflow: hidden;
                margin-bottom: 40px;
                &::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(165, 165, 165, .3) 100%);
                    backdrop-filter: blur(6px);
                    -webkit-backdrop-filter: blur(6px);
                    box-shadow: var(--shadow-main);
                    transition: opacity .2s linear;
                }
            }
            .meta {
                display: flex;
                gap: 20px;
                align-items: center;
                margin-bottom: 20px;
                p {
                    font-size: 22px;
                    color: var(--white-70);
                }
                span {
                    display: block;
                    background: var(--white-70);
                    height: 20px;
                    width: 1px;
                }
            }
            a {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
            h3 {
                font-size: 26px;
            }
            &:nth-child(1) {
                grid-column: 1;
                grid-row: 1;
            }
            &:nth-child(2) {
                grid-column: 1;
                grid-row: 2;
            }
            &:nth-child(3) {
                grid-column: 2;
                grid-row: 1 / 3;
            }
            &:nth-child(4) {
                grid-column: 1;
                grid-row: 3;
            }
            &:nth-child(5) {
                grid-column: 2;
                grid-row: 2 / 4;
            }
        }
    }
    > .btn {
        position: absolute;
        right: calc((100% - 60px) / 4 - 230px);
        bottom: 200px;
        span {
            width: 400px;
        }
    }
}
@media screen and (max-width: 1720px) {
    .portfolio {
        .items {
            gap: 40px;
            .item {
                .img {
                    margin-bottom: 20px;
                }
                .meta {
                    margin-bottom: 10px;
                    p {
                        font-size: 18px;
                    }
                    span {
                        height: 18px;
                    }
                }
                h3 {
                    font-size: 22px;
                }
            }
        }
        > .btn {
            bottom: 140px;
        }
    }
}
@media screen and (max-width: 1279px) {
    .portfolio {
        .headline {
            position: static;
            margin-bottom: 60px;
            h2 {
                margin-left: auto;
            }
        }
        .items {
            display: flex;
            flex-direction: column;
            .item {
                .img {
                    &::after {
                        content: none;
                    }
                }
            }
        }
        > .btn {
            position: static;
            margin: 60px auto 0;
            span {
                width: 240px;
            }
        }
    }
}
@media screen and (max-width: 767px) {
    .portfolio {
        .headline {
            margin-bottom: 40px;
        }
        .items {
            .item {
                .img {
                    border-radius: 20px;
                }
                .meta {
                    gap: 10px;
                    p {
                        font-size: 14px;
                    }
                }
                h3 {
                    font-size: 18px;
                }
            }
        }
    }
}
@media screen and (hover: hover) {
    .portfolio .items .item:hover {
        .img {
            p {
                top: 50%;
                opacity: 1;
                visibility: visible;
                &.blue {
                    span {
                        color: var(--blue);
                        background: transparent;
                        box-shadow: var(--shadow-main);
                    }
                    &::after {
                        background: transparent;
                        color: var(--blue);
                        transform: rotate(45deg);
                        box-shadow: var(--shadow-main);
                    }
                }
            }
            &::after {
                opacity: 0;
            }
        }
        h3 {
            color: var(--blue);
        }
    }
}