/*=========================================================
MARAMATTA SAFARIS

MAIN LAYOUT SYSTEM

main.css

Controls:
• Homepage Layout
• Global Sections
• Containers
• Section Rhythm

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

/*=========================================================
HOME
=========================================================*/

.ms-home,
.ms-landing{

    width:100%;
    min-height:100vh;

    background:var(--ms-bg);

    overflow-x:hidden;

}



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

.ms-home > .ms-section,
.ms-landing > .ms-section{

    position:relative;

    width:100%;

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

}





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

.ms-home > .ms-section:first-child,
.ms-landing > .ms-section:first-child{

    padding-top:0;

}


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

.ms-home > .ms-section:last-child,
.ms-landing > .ms-section:last-child{

    padding-bottom:var(--section-padding);

}


/*=========================================================
GLOBAL CONTAINER
=========================================================*/
.ms-home > .ms-section > .container,
.ms-landing > .ms-section > .container{
    max-width: 90%;

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

    /*max-width:var(--container-width);*/

    margin-inline:auto;

}




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

.section-header{
    text-align:center;

    margin-bottom:var(--space-2xl);

}



.section-body{

    position:relative;
    width: 100%;

}



.section-footer{

    margin-top:var(--space-2xl);

}



/*=========================================================
DEFAULT TEXT WIDTH
=========================================================*/

.section-header > *{

    max-width:var(--text-width);

}



/*=========================================================
STACK SPACING
=========================================================*/

.section-stack{

    display:flex;
    flex-direction:column;
    gap:var(--space-2xl);

}



/*=========================================================
CENTER HELPER
=========================================================*/

.section-center{

    text-align:center;
    margin-inline:auto;

}



/*=========================================================
NARROW CONTENT
=========================================================*/

.content-width{

    max-width:var(--content-width);
    margin-inline:auto;

}


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

.text-width{

    max-width:var(--text-width);

}