/* ----- BANNER HERO ----- */
.banner-hero {
    display: flex;
    width: 100%;
    max-width: 1512px; 
    height: fit-content;
    padding: var(--space-large);
    flex-direction: column;
    align-items: flex-start;
    background: var(--blue-50);
    margin: 0 auto; 
    overflow: hidden; 
    padding-top: var(--space-extra-large);
}

.image-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
}

.text {
    max-width: 686px;
    margin-top: var(--space-large);
}

/* TYPE STYLES BREAKDOWN */


.Typography-Content, .content-block, .UI-Application{
    display: flex;
    width: 100%;
    max-width: 1512px; 
    height: fit-content;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto; 
    padding-top: var(--space-medium);
}

.Typography-Content__Styling{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 1fr  ;
    column-gap: 200px;
}

.Typography-Content__Styling:nth-child(2){
  column-gap: 160px;
  
}

.Type-Header__Title:nth-child(2){
    display: flex;
    justify-content: left;
}

.Type-Name{
    grid-column: 1/5;
    grid-row: 1/2; 
    display: flex; 
    flex-direction: column;
    justify-content: left;
}

.Type-Header__Title{
    grid-column: 2/3;
    grid-row: 2/3;
    display: flex; 
    flex-direction: column;
    justify-content: left;
}

.Type-Header__Weight{
    grid-column: 3/4;
    grid-row: 2/3;
    display: flex; 
    flex-direction: column;
    justify-content: left;
}

.Type-Header__Size{
    grid-column: 4/5;
    grid-row: 2/3;
    display: flex; 
    flex-direction: column;
    justify-content: left;
}

.Type-Header__Spacing{
    grid-column: 5/6;
    grid-row: 2/3;
    display: flex; 
    flex-direction: column;
    justify-content: left;
}

.UI-Block{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 200px;
    align-items: start;
    margin-bottom: 32px;
}

.UI-Application-Header {
    grid-column: 1/4;
    grid-row: 1/2;
}


.UI-Item {
    align-items:start;
}

.Component-Name{
    margin-right: 32px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

/* TYPOGRAPHY SETTING */

.Header-1_family{
    font-size: 30px;
    font-weight: 700;
    
}

.Header-2_family{
    font-size: 24px;
    font-weight: 600;
}

.Header-3_family{
    font-size: 20px;
    font-weight: 500;
}

.Body-Regular_family{
    font-weight: normal;
    font-size: 16px;
}
.Body-Bold_family{
    font-weight: bold;
    font-size: 16px;
}
.label_family{
    font-size: 12px;
    font-weight: normal;
}
.label_Underlined_family{
    font-size: 12px;
    font-weight: normal;
    text-decoration: underline;
}
 /* BOTTOM NAVIGATION */