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

.container{

    width:100%;

    max-width:1280px;

    margin:0 auto;

    padding:0 24px;

}

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

.section{

    padding:96px 0;

}

.section-sm{

    padding:64px 0;

}

.section-lg{

    padding:120px 0;

}

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

.section-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    background:var(--primary-light);

    color:var(--primary-dark);

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

.section-title{

    font-size:48px;

    line-height:1.2;

    font-weight:800;

    color:var(--secondary);

    margin-bottom:20px;

}

.section-description{

    font-size:20px;

    color:var(--text-light);

    line-height:1.8;

}

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

.grid{

    display:grid;

    gap:32px;

}

.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-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px){

.grid-4{

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

}

.grid-3{

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

}

}

@media(max-width:768px){

.container{

padding:0 18px;

}

.section{

padding:70px 0;

}

.section-title{

font-size:36px;

}

.section-description{

font-size:17px;

}

.grid-2,

.grid-3,

.grid-4{

grid-template-columns:1fr;

}

}

/* ===========================
   Lesson Layout
=========================== */

.lesson-layout{

      display:flex;

    align-items:flex-start;

}

.lesson-sidebar{

    width:260px;

    min-width:260px;

    flex-shrink:0;

}

.lesson-main{

    flex:1;

    min-width:0;
    max-width: 1350px;

    padding:40px;

    overflow:hidden;

}

@media (max-width:1024px){

    .lesson-layout{

        display:block;

    }

    .lesson-main{

        padding:25px;

    }

}