/* PORTFOLIO.CSS */

.page-hero
{
    position: relative;
    padding: 190px 0 120px;
    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.82),
            rgba(0,0,0,.45)
        ),
        url('../img/hero/hero.webp')
        center center / cover no-repeat;

    color: rgba(255,255,255,.78);
    overflow: hidden;
}

.portfolio-page
{
    background: var(--color-light);
}

.portfolio-page-grid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.portfolio-page-card
{
    overflow: hidden;
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.portfolio-page-card:hover
{
    transform: translateY(-6px);
}

.portfolio-page-image
{
    overflow: hidden;
}

.portfolio-page-image img
{
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: .6s ease;
}

.portfolio-page-card:hover img
{
    transform: scale(1.06);
}

.portfolio-page-content
{
    padding: 32px;
}

.portfolio-page-content h2
{
    margin-bottom: 10px;
    font-size: 28px;
}

.portfolio-city
{
    margin-bottom: 18px;
    color: var(--color-primary);
    font-weight: 700;
}

@media screen and (max-width: 992px)
{
    .portfolio-page-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px)
{
    .portfolio-page-grid
    {
        grid-template-columns: 1fr;
    }

    .portfolio-page-content
    {
        padding: 28px 22px;
    }
}

.empty-portfolio
{
    max-width: 720px;
    margin: 0 auto;
    padding: 60px;
    text-align: center;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}

.empty-portfolio h2
{
    margin-bottom: 18px;
}

.empty-portfolio p
{
    margin-bottom: 30px;
}