.panel-container * {
    box-sizing: border-box;
}
.panel-container {
    display: flex;
    overflow: hidden;
    margin: 20px 0;
    height: 200px;
}
.panel {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0.5;
    cursor: pointer;
    position: relative;
    margin: 0 8px;
    transition: flex 0.7s cubic-bezier(0.05, 0.6, 0.4, 0.9);
}

.panel.active {
    flex: 3;
}


@media screen and (max-width: 480px) {
    .panel-container {
        position: relative;
    }
    .panel {
        width: 10%;
        position: relative;
        height: 80px;
        top: 0;
        border: 4px solid #FFF;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
        flex: 1;
    }
    .panel.active {
        flex: 1;
        width: 100%;
        position: absolute;
        height: 360px;
        left: 0;
        margin: 40px 0 0;
        z-index: -1;
        box-shadow: none;
    }
}