.style {
    padding: 0 1rem;
}

.style__block {
    position: relative;
    border: 1px solid #b40808;
}

/* (landscape tablet, 1000px and up) */
@media (min-width: 62.5em) {

    .style__block {
        padding-bottom: 6rem;
    }

}

/** MOLECULE - STYLE COLOURS **/

.style__heading {
    position: absolute;
    left: 1rem;
    top: -.8rem;
}

.style__colour-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.style__colour-block--main,
.style__colour-section h4 {
    flex: 0 1 100%;
}

.style__colour-block--small {
    flex: 0 1 80%;
    font-size: .8rem;
}

.style__colour-section--neutral .style__colour-block--small {
    flex: 0 1 50%;
}

/* (landscape tablet, 1000px and up) */
@media (min-width: 62.5em) {

    .style {
        display: flex;
        flex-wrap: wrap;
    }

    .style__colours {
        flex: 0 1 40%;
        padding: 2rem;
    }

}

/** MOLECULE - STYLE TYPOGRAPHY **/

.style__split {
    padding: 0;
}


.style__typography {
    border-top: 0;
    padding: 1rem;
}

/* (landscape tablet, 1000px and up) */
@media (min-width: 62.5em) {

    .style__split {
        flex: 0 1 60%;
        margin-top: 1.5rem;
        padding-bottom: 3rem;
        border-left: 0;
        display: flex;
        flex-wrap: wrap;
    }

    .style__typography {
        padding: 1rem 2rem 3rem;
    }

    .style__fonts,
    .style__font-example {
        display: flex;
        justify-content: space-between;
    }

    .style__fonts > * {
        flex: 0 1 32%;
    }

    .style__font-example > * {
        flex: 0 1 48%;
    }

}

/** MOLECULE - STYLE BUTTONS **/

.style__buttons,
.style__links {
    position: relative;
    padding: 2rem 1rem 1rem;
    border-top: 1px solid #b40808;
}

.style__tables {
    position: relative;
}

.style__button-group {
    display: flex;
    flex-wrap: wrap;
}

.style__button-group .button {
    margin-bottom: .8rem;
}

/* (landscape tablet, 1000px and up) */
@media (min-width: 62.5em) {

    .style__buttons,
    .style__links {
        flex: 0 1 50%;
        padding: 2rem;
    }

    .style__buttons {
        border-right: 1px solid #b40808;
    }

}


/** MOLECULE - STYLE LINKS **/

a.hovered {
    text-decoration: underline;
}

/** MOLECULE - STYLE ACCORDIONs **/

.style__main {
    position: relative;
    padding: 1rem 0 2rem;
}

.style__main > * {
    padding: 2rem 1rem 1rem;
    border-top: 1px solid #b40808;
}

.style__accordions {
    border-top: 0;
}

/* (landscape tablet, 1000px and up) */
@media (min-width: 62.5em) {

    .style__main {
        width: 100%;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        border-top: 0;
    }

    .style__accordions,
    .style__tables {
        flex: 0 1 50%;
        border: 0;
        padding: 2rem 2rem 4rem;
    }

    .style__accordions {
        border-right: 1px solid #b40808;
    }

}

/** MOLECULE - STYLE SOCIAL **/

.style__block-small {
    position: relative;
}

/* (landscape tablet, 1000px and up) */
@media (min-width: 62.5em) {

    .style__block-small {
        flex: 0 1 50%;
        padding: 2rem;
    }

    .style__social-group .content__social {
        display: flex;
        flex-wrap: wrap;
    }

    .style__social-group .content__social > * {
        flex: 0 1 50%;
    }

}