/* ABOUT.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;
}

.about-intro
{
    background: var(--color-white);
}

.about-grid
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-images
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.about-images img
{
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.about-images img:last-child
{
    margin-top: 60px;
}

.about-content h2
{
    margin-bottom: 28px;
}

.about-content p
{
    margin-bottom: 24px;
}

.about-values
{
    background: var(--color-light);
}

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

.value-card
{
    padding: 42px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}

.value-card h3
{
    margin-bottom: 18px;
}

@media screen and (max-width: 992px)
{
    .about-grid,
    .values-grid
    {
        grid-template-columns: 1fr;
    }

    .about-images
    {
        order: 2;
    }
}

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

    .about-images img
    {
        height: 380px;
    }

    .about-images img:last-child
    {
        margin-top: 0;
    }

    .value-card
    {
        padding: 32px 24px;
    }
}