/**
 * @author: Yoann Le Crom <yoann.lecrom@abstractive.fr>
 */

.Panel {
    position: relative;
    flex: 1 1 auto;
    padding: 3rem 4rem;
    border: 1px solid var(--secondary-color);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
}
.Panel--noGrow {
    flex-grow: 0;
}

.Panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.Panel-header-title {
    margin: 0;
}

.Panel-body {
    flex: 1 1 auto;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}

.Panel--bg {
    background: #fff;
}
.Panel--darkBg {
    background: var(--body-bg-color);
}
.Panel--smallPadding {
    padding: 1.5rem 2rem;
}

.Panel + .Panel {
    margin-top: 2rem;
}

.Panel--altMode {
    padding: 0;
    overflow: hidden;
    background:var(--body-bg-color);
}
.Panel--altMode .Panel-header {
    background: var(--secondary-color);
    padding: 1rem 2rem;
}
.Panel--altMode .Panel-header-title {
    color: #fff;
}
.Panel--altMode .Panel-body {
    padding: 0 4rem 3rem 4rem;
}

@media (max-width: 1400px) {
    .Panel {
        padding: 2rem 2.5rem;
    }

    .Panel--altMode {
        padding: 0;
    }
}