/* ==========================================
   CNA V2

   File:
   layout.css

   Description:
   Global Layout System

   Author:
   CNA

========================================== */

/* ===== Container ===== */

.container{

    width:min(var(--container), calc(100% - 48px));

    margin-inline:auto;

}

/* ===== Sections ===== */

.section{

    position:relative;

    padding:120px 0;

}

.section-small{

    padding:80px 0;

}

.section-large{

    padding:160px 0;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}

/* ===== Grid ===== */

.grid{

    display:grid;

    gap:2rem;

}

.grid-2{

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

}

.grid-3{

    grid-template-columns:repeat(3,1fr);

}

.grid-4{

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

}

/* ===== Flex ===== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ===== Titles ===== */

/* ==========================
   SECTION HEADER
========================== */

.section-header{
    max-width: 900px;
    margin: 0 auto 5rem;
    text-align: center;
}

.section-label{

    display:inline-block;

    margin-bottom:1rem;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:var(--color-primary);

}

.section-title{

    font-size:clamp(2.7rem,5vw,4.8rem);

    line-height:1.05;

    font-weight:800;

    color:var(--text-primary);

    margin-bottom:1.5rem;

}

.section-description{

    max-width:720px;

    margin:0 auto;

    color:var(--text-secondary);

    font-size:1.1rem;

    line-height:1.8;

}

/* ===== Cards ===== */

.card{

    background:var(--bg-card);

    border:1px solid var(--border-color);

    border-radius:var(--radius-lg);

    backdrop-filter:blur(18px);

}

/* ===== Divider ===== */

.divider{

    width:100%;

    height:1px;

    background:rgba(255,255,255,.06);

}