/*
|--------------------------------------------------------------------------
| Market Position
|--------------------------------------------------------------------------
*/

.market-position {
    padding:
        85px
        0
        90px;

    background: #292929;
}


/*
|--------------------------------------------------------------------------
| Top Row
|--------------------------------------------------------------------------
*/

.market-position__top {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, .95fr);

    gap: 70px;

    align-items: center;

    margin-bottom: 95px;
}


.market-position__copy {
    max-width: 760px;
}


.market-position__eyebrow {
    margin-bottom: 14px;

    color: var(--color-gold);

    font-size: var(--font-size-text-large);
    font-weight: 700;

    text-transform: uppercase;
}


.market-position__title {
    margin:
        0
        0
        18px;

    font-family: var(--font-title);

    font-size: var(--font-size-h2);

    font-weight: 400;

    line-height: 1.05;

    color: var(--color-white);
}


.market-position__description {
    max-width: 720px;

    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: var(--font-size-text-main);
    font-weight: 300;

    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| Featured Image
|--------------------------------------------------------------------------
*/

.market-position__featured-image {
    overflow: hidden;
    min-height: 680px;
}


.market-position__featured-image img {
    display: block;

    width: 100%;
    height: 100%;
    height: 680px;

    object-fit: cover;
}


/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/

.market-position__cards {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 22px;
}


/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.market-card {
    position: relative;

    min-height: 680px;

    overflow: hidden;

    cursor: pointer;

    outline: none;
}


.market-card__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.02);

    transition:
        transform .7s ease;
}


/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.market-card__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.12) 0%,
            rgba(0,0,0,.18) 50%,
            rgba(0,0,0,.58) 100%
        );

    transition:
        background .4s ease;
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.market-card__content {
    position: absolute;

    z-index: 2;

    left: 32px;
    right: 32px;
    bottom: 30px;

    color: var(--color-white);

    transform: translateY(0);

    transition:
        transform .45s
        cubic-bezier(.22,.61,.36,1);
}


.market-card__title {
    margin:
        0
        0
        8px;

    font-family: var(--font-title);

    font-size: var(--font-size-h2);
    font-weight: 400;

    line-height: 1.05;
}


.market-card__description {
    max-width: 640px;

    margin: 0;

    color: rgba(255,255,255,.92);

    font-size: var(--font-size-text-main);
    font-weight: 300;

    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Bottom Line
|--------------------------------------------------------------------------
*/

.market-card__line {
    display: block;

    width: 100%;
    height: 3px;

    margin-top: 26px;

    background: var(--color-gold);

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform .5s
        cubic-bezier(.76,0,.24,1);
}


/*
|--------------------------------------------------------------------------
| Hover / Focus
|--------------------------------------------------------------------------
*/

.market-card:hover
.market-card__overlay,
.market-card:focus-visible
.market-card__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.20) 0%,
            rgba(0,0,0,.32) 45%,
            rgba(0,0,0,.70) 100%
        );
}


.market-card:hover
.market-card__content,
.market-card:focus-visible
.market-card__content {
    transform:
        translateY(-14px);
}


.market-card:hover
.market-card__line,
.market-card:focus-visible
.market-card__line {
    transform:
        scaleX(1);
}


.market-card:hover
.market-card__image,
.market-card:focus-visible
.market-card__image {
    transform:
        scale(1.04);
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1199px) {

    .market-position__top {
        gap: 45px;
    }


    .market-position__featured-image img {
        min-height: 560px;
    }


    .market-card {
        min-height: 560px;
    }

}


@media (max-width: 991px) {

    .market-position__top {
        grid-template-columns: 1fr;

        gap: 35px;

        margin-bottom: 60px;
    }


    .market-position__copy {
        max-width: 100%;
    }


    .market-position__featured-image img {
        height: 480px;
    }


    .market-position__cards {
        grid-template-columns: 1fr;
    }


    .market-card {
        min-height: 520px;
    }

}


@media (max-width: 767px) {

    .market-position {
        padding:
            55px
            0
            60px;
    }


    .market-position__title {
        font-size: 40px;
    }


    .market-position__description {
        font-size: 17px;
    }


    .market-position__featured-image img {
        height: 360px;
    }


    .market-card {
        min-height: 430px;
    }


    .market-card__content {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }


    .market-card__title {
        font-size: 30px;
    }


    .market-card__description {
        font-size: 20px;
    }

}