/*============================ PAGE ============================*/

.gne-website-evolution__container {
    max-width: 992px;
    margin: 50px auto;
    padding: 0 25px;
}

.gne-website-evolution__strategy {
    margin: 0 0 25px;
}


/*============================ BROWSER EVOLUTION ============================*/

.gne-website-evolution__browsers {
    display: flex;
    flex-flow: column nowrap;
    gap: 25px;
}

.gne-website-evolution__browser-card img {
    display: block;
    width: 100%;
    height: auto;
}


/*============================ DESIGN SYSTEM ============================*/

.gne-website-evolution__design-system--grid {
    display: flex;
    flex-flow: column nowrap;
    gap: 25px;
}

.gne-website-evolution__design-system--grid h3 {
    margin: 0 0 25px;
}

.gne__design-system--label {
    display: block;
    margin: 0 0 15px;
}

.gne-website-evolution__grid-card {
    border: 1px solid var(--color-medium-grey);
    border-radius: 5px;
    padding: 25px;
    box-sizing: border-box;
}

.gne-website-evolution__grid-card h3 {
    margin-top: 0;
}

.gne-website-evolution__design-system--number-header {
    font-family: var(--font-heading);
    font-size: 40px;
    color: var(--color-charcoal);
    margin: 16px 0;
}


/*============================ TYPOGRAPHY ============================*/

.gne__design-system--h1 {
    font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: #005941;
    line-height: 1.2em;
    margin-bottom: 15px;
}

.gne__design-system--h2 {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: #2d2a26;
    line-height: 1.2em;
    margin-bottom: 15px;
}

.gne__design-system--h3 {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #2d2a26;
    line-height: 1.2em;
    margin-bottom: 15px;
}

.gne__design-system--h4 {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #2d2a26;
    line-height: 1.2em;
    margin-bottom: 15px;
}


/*============================ COLOR ============================*/

.gne__design-system--color-grid {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}

.gne__design-system--color-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gne__design-system--color-swatch {
    width: 50px;
    height: 50px;
    border: 1px solid var(--color-light-grey);
    border-radius: 3px;
    box-sizing: border-box;
}

.gne__design-system--text {
    margin-top: 10px;
}


/* GNE Green */

.gne__design-system--color-gne-green {
    background-color: #005941;
}


/* Charcoal */

.gne__design-system--color-charcoal {
    background-color: #2d2a26;
}


/* Dark Grey */

.gne__design-system--color-dark-grey {
    background-color: #595959;
}


/* Medium Grey */

.gne__design-system--color-medium-grey {
    background-color: #d9dad9;
}


/* Light Grey */

.gne__design-system--color-light-grey {
    background-color: #efefef;
}


/*============================ BUTTONS ============================*/

.gne__design-system--button-grid {
    display: flex;
    flex-flow: row wrap;
    gap: 15px;
}

.gne-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;

    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.03em;

    text-decoration: none;

    border: 2px solid transparent;
    border-radius: 5px;

    cursor: pointer;

    transition:
        filter 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


/* Primary Button */

.gne-btn--primary {
    color: var(--color-white);
    background-color: #005941;
    border-color: #aeafb3;
}

.gne-btn--primary:hover {
    color: #aeafb3;
    background-color: #002d1f;
    border-color: #aeafb3;
}


/* Secondary Button */

.gne-btn--secondary {
    color: #005941;
    background-color: var(--color-white);
    border-color: #aeafb3;
}

.gne-btn--secondary:hover {
    color: #aeafb3;
    background-color: #d9dad9;
    border-color: #aeafb3;
}


/* Tertiary Button */

.gne-btn--tertiary {
    color: #2d2a26;
    background-color: #d9dad9;
    border-color: #aeafb3;
}

.gne-btn--tertiary:hover {
    color: #d9dad9;
    background-color: #aeafb3;
    border-color: #d9dad9;
}


/* Disabled Button */

.gne-btn--disabled {
    color: #d9dad9;
    background-color: #aeafb3;
    border-color: #d9dad9;
    cursor: not-allowed;
}


/*============================ ICONOGRAPHY ============================*/

.gne__design-system--icon-grid {
    display: flex;
    flex-flow: row wrap;
    gap: 25px 15px;
}

.gne__design-system--icon-container {
    display: flex;
    flex: 0 0 calc(33.333% - 10px);
    flex-direction: column;
    align-items: center;
    gap: 8px;

    text-align: center;
}


/* Icon Image */

.gne__design-system--icon-container img {
    display: block;

    width: 50px;
    height: 50px;

    object-fit: contain;
}


/* Icon Label */

.gne__design-system--icon-container span {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #2d2a26;
}

/*============================ UI COMPONENTS ============================*/

/*============================ SNACKBARS ============================*/

.gne-snackbar {
    display: flex;
    align-items: center;

    width: 100%;
    padding: 20px 25px;

    border: 2px solid;
    border-radius: 5px;

    box-sizing: border-box;
}


/* Snackbar Icon */

.gne-snackbar__icon {
    display: block;
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    object-fit: contain;
}


/* Snackbar Content */

.gne-snackbar__content {
    margin-left: 25px;

    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #2d2a26;
}

.gne-snackbar__content strong {
    margin-right: 5px;
}


/* Success Snackbar */

.gne-snackbar--success {
    background-color: #d9f2e6;
    border-color: #005941;
}

.gne-snackbar--information {
    background-color: #fff2bb;
    border-color: #ffd100;
}

.gne-snackbar--error {
    background-color: #ffe1e1;
    border-color: #ff0000;
}

.gne-website-evolution__snackbars p {
    margin: 30px 0 10px;
}


/*============================ MEDIA ============================*/

@media (min-width: 768px) {

    /*============================ PAGE ============================*/

    .gne-website-evolution__container {
        padding: 0;
        text-align: left;
    }


    /*============================ BROWSER EVOLUTION ============================*/

    .gne-website-evolution__browsers {
        flex-flow: row nowrap;
        gap: 0;
    }

    .gne-website-evolution__browser-card {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 20px;
    }

    .gne-website-evolution__browser-card:first-child {
        padding-left: 0;
    }

    .gne-website-evolution__browser-card:last-child {
        padding-right: 0;
    }

    .gne-website-evolution__browser-card +
    .gne-website-evolution__browser-card {
        border-left: 1px solid var(--color-medium-grey);
    }

    .gne-website-evolution__browser-card h3 {
        min-height: 2.4em;
    }

    .gne-website-evolution__browser-card p {
        min-height: 3em;
    }


    /*============================ DESIGN SYSTEM ============================*/

    .gne-website-evolution__design-system--grid {
        flex-flow: row wrap;
        gap: 25px;
    }

    .gne-website-evolution__grid-card {
        flex: 0 0 calc(50% - 12.5px);
    }

    .gne-website-evolution__grid-card--wide {
        flex-basis: 100%;
    }

}