/*====================================================
=            Playbook Hero
====================================================*/

.cr-playbook-hero{

    display:grid;

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

    gap:var(--global-row-gutter-md, 2rem) var(--global-row-gutter-md, 2rem);

    align-items:center;

}

.cr-playbook-left{

    display:flex;

    flex-direction:column;

    min-width:0;

}

.cr-playbook-right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    min-width:0;

}

/*----------------------------------------------------
Heading
----------------------------------------------------*/

.cr-playbook-title{

    margin:0;

    color:var(--global-palette3);

    font-family:var(--global-heading-font-family);

    font-size: var(--global-kb-font-size-xxl, 4rem);
    
    font-weight:300;

    line-height:1.2;
    
    margin-bottom: var(--global-kb-spacing-xs, 1rem);
}

.cr-playbook-title .gradient-heading{

    display:inline;

}

/*----------------------------------------------------
Excerpt
----------------------------------------------------*/

.cr-playbook-excerpt{

    margin:2rem 0;

    max-width:700px;

    color:var(--global-palette4);

    font-family:var(--global-body-font-family);

    font-size:16px;

    font-weight:300;

    line-height:1.6;

}

/*----------------------------------------------------
Divider
----------------------------------------------------*/

.cr-divider{

    width:100%;

    margin:0 0 30px;

    border:0;

    border-top:1px solid #2D3748;

}

/*----------------------------------------------------
Statistics
----------------------------------------------------*/

.cr-playbook-stats{

    display:grid;

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

    gap:48px;

    max-width:700px;

}

.cr-stat-item{

    display:flex;

    flex-direction:column;

}

.cr-stat-number{

    margin:0 0 10px;

    color:var(--global-palette3);

    font-family:"JetBrains Mono", monospace;

    font-size:var(--global-kb-font-size-md,1.25rem);

    font-weight:300;

    line-height:1;

    text-transform:uppercase;

}

.cr-stat-label{

    /*color:var(--global-palette5);*/

    /*font-family:"Newsreader", serif;*/

    /*font-size:var(--global-kb-font-size-sm,.9rem);*/

    /*font-weight:400;*/

    /*line-height:1.5;*/

    /*text-transform:uppercase;*/


	font-size: 13px;
    line-height: 2.4;
    font-weight: 400;
    font-family: Syne;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--global-palette5);
}

/*----------------------------------------------------
Hero Image
----------------------------------------------------*/

.cr-hero-figure{

    width:100%;

    margin:0;

}

.cr-hero-image-wrap{

    position:relative;

    overflow:hidden;

    width:100%;

    aspect-ratio:4 / 3;

    border-radius:10px;

}

.cr-hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:50% 50%;

    display:block;

}

/*----------------------------------------------------
Embedded Form
----------------------------------------------------*/

.cr-playbook-form{

    width:100%;

}

.cr-playbook-form iframe{

    width:100% !important;

    display:block;

    border:0;

    border-radius:10px;

}

/*====================================================
Tablet
====================================================*/

@media (max-width:1024px){

    .cr-playbook-hero{

        grid-template-columns:1fr;

        gap:50px;

    }

    .cr-playbook-right{

        order:-1;

        justify-content:center;

    }

    .cr-playbook-left{

        max-width:100%;

    }

    .cr-playbook-title{

        font-size:64px;

    }

    .cr-playbook-stats{

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

        gap:30px;

        max-width:none;

    }

}

/*====================================================
Mobile
====================================================*/

@media (max-width:767px){

    .cr-playbook-hero{

        gap:40px;

    }

    .cr-playbook-title{

        font-size:46px;

    }

    .cr-playbook-excerpt{

        font-size:18px;

    }

    .cr-playbook-stats{

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

        gap:20px;

    }

}