/* =========================================================
   LAYOUT SYSTEM
   Portfolio: Lekan Olowookere
   Version: 1.0
========================================================= */

/* ===========================
   WRAPPER
=========================== */

.wrapper{

    width:min(100% - 2rem,var(--container-lg));

    margin-inline:auto;
}

/* ===========================
   CONTAINER
=========================== */

.container{

    width:min(100% - 2rem,var(--container-lg));

    margin-inline:auto;
}

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

.section{

    padding-block:var(--section-padding);
}

.section-sm{

    padding-block:80px;
}

.section-lg{

    padding-block:160px;
}

/* ===========================
   GRID
=========================== */

.grid{

    display:grid;

    gap:var(--grid-gap);
}

.grid-2{

    display:grid;

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

    gap:var(--grid-gap);
}

.grid-3{

    display:grid;

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

    gap:var(--grid-gap);
}

.grid-4{

    display:grid;

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

    gap:var(--grid-gap);
}

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

.flex-column{

    display:flex;

    flex-direction:column;
}

/* ===========================
   GAP UTILITIES
=========================== */

.gap-1{gap:var(--space-1);}
.gap-2{gap:var(--space-2);}
.gap-3{gap:var(--space-3);}
.gap-4{gap:var(--space-4);}
.gap-5{gap:var(--space-5);}
.gap-6{gap:var(--space-6);}

/* ===========================
   ALIGNMENT
=========================== */

.text-center{

    text-align:center;
}

.text-left{

    text-align:left;
}

.text-right{

    text-align:right;
}

/* ===========================
   WIDTH
=========================== */

.w-100{

    width:100%;
}

.max-content{

    width:max-content;
}

/* ===========================
   DISPLAY
=========================== */

.hidden{

    display:none;
}

.block{

    display:block;
}

.inline-flex{

    display:inline-flex;
}

/* ===========================
   POSITION
=========================== */

.relative{

    position:relative;
}

.absolute{

    position:absolute;
}

/* ===========================
   OVERFLOW
=========================== */

.overflow-hidden{

    overflow:hidden;
}

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

.section-header{

    max-width:720px;

    margin-inline:auto;

    margin-bottom:72px;

    text-align:center;
}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.5rem 1rem;

    margin-bottom:1rem;

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

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

    background:var(--bg-glass);

    color:var(--color-primary);

    font-size:var(--fs-sm);

    font-weight:var(--fw-semibold);

    backdrop-filter:blur(var(--blur-md));
}

.section-title{

    font-size:clamp(2.5rem,5vw,4.5rem);

    line-height:1.1;

    margin-bottom:1.5rem;
}

.section-description{

    font-size:var(--fs-lg);

    color:var(--text-secondary);
}

/* ===========================
   DIVIDERS
=========================== */

.divider{

    width:100%;

    height:1px;

    background:var(--border-color);
}