/*------------------------------------*\
    #PATTERN INFO
\*------------------------------------*/

/**
 * 1) Pattern info contains two sidy-by-side panels that
 *    house a pattern's information, such as title, lineage,
 *    code, annotations, and more.
 */
.pl-c-pattern-info {

    @media all and (min-width: $pl-bp-large) {
        display: flex;
        flex: 1 1 auto;
    }
}

/**
 * Pattern Info Panel
 * 1) Individual panel. Left side contains pattern info
 *    Right side contains pattern code
 */
.pl-c-pattern-info__panel {
    flex: 1 1 auto;
    max-height: none;
    padding: 0;

    &.active {
        max-height: none;
    }

    @media all and (min-width: $pl-bp-large) {
        min-width: 40%;
        flex: auto;
    }
}

/**
 * Pattern Code Panel
 */
.pl-c-pattern-info__panel--code {
    @media all and (min-width: $pl-bp-large) {
        min-width: 60%;
    }
}
/*------------------------------------*\
    #PATTERN INFO
\*------------------------------------*/

/**
 * 1) Pattern info contains two sidy-by-side panels that
 *    house a pattern's information, such as title, lineage,
 *    code, annotations, and more.
 */
.pl-c-pattern-info {

    @media all and (min-width: $pl-bp-large) {
        display: flex;
        flex: 1 1 auto;
    }


    /**
     * Pattern Info inside a view all pattern 
     */
    .pl-c-pattern__extra & {
        padding: 1rem;
    }
}

/**
 * Pattern Info Panel
 * 1) Individual panel. Left side contains pattern info
 *    Right side contains pattern code
 */
.pl-c-pattern-info__panel {
    flex: 1 1 auto;
    max-height: none;
    padding: 0;

    @media all and (min-width: $pl-bp-large) {
        min-width: 40%;
        flex: auto;
    }
}

/**
 * Pattern Code Panel
 */
.pl-c-pattern-info__panel--code {
    @media all and (min-width: $pl-bp-large) {
        min-width: 60%;
    }
}
Add pattern for view all mode
Add pattern for view all mode
