#cms .component-list {
    list-style: none;

}
#cms .component-list li a {
    display: block;
    border: 1px solid #ccc;
    padding: 15px;
    margin: 5px;
}
#cms .component-list li span.name {
    display: block;
    font-size: 1.3em;
}
#cms ul.section {
    list-style: none;
    padding: 5px;
    border: 1px dashed #fff;
    margin: 0;
    min-height: 40px;
}
#cms .cms-move-component {
    min-height: 60px;
    border: 1px dotted #666;
}
#cms .placeholder {
    min-height: 60px;
    background-color: #ccc;
}
#cms .cms-move-component .label {
    background: #e24927;
    padding: 5px;
}

#cms .cms-move-component .label:hover {
    cursor: move;
}

#cms .cms-component .label {
    font-size: 0.9em;
    background: #555;
    padding: 2px;
    display: block;
    color: #fff;
}

#edit-component-container {
    padding: 25px;
}

#cms.editmode .cms-component {
    border: 1px dotted rgba(255, 255, 255, 0.5);
    padding: 2px;
}

textarea#component-content {
    min-height: 200px;
}

/* Layouts *******************************/
#cms-section-1 {grid-area: cms-section-1;}
#cms-section-2 {grid-area: cms-section-2;}
#cms-section-3 {grid-area: cms-section-3;}
#cms-section-4 {grid-area: cms-section-4;}
#cms-section-5 {grid-area: cms-section-5;}
#cms-section-6 {grid-area: cms-section-6;}
#cms-section-7 {grid-area: cms-section-7;}
#cms-section-8 {grid-area: cms-section-8;}
#cms-section-9 {grid-area: cms-section-9;}
#cms-section-10 {grid-area: cms-section-10;}
#cms-section-11 {grid-area: cms-section-11;}
#cms-section-12 {grid-area: cms-section-12;}
#cms-section-13 {grid-area: cms-section-13;}
#cms-section-14 {grid-area: cms-section-14;}
#cms-section-15 {grid-area: cms-section-15;}
#cms-section-16 {grid-area: cms-section-16;}
#cms-section-17 {grid-area: cms-section-17;}
#cms-section-18 {grid-area: cms-section-18;}
#cms-section-19 {grid-area: cms-section-19;}
#cms-section-20 {grid-area: cms-section-20;}

#cms .cms-container {
    display: grid;
}
#cms .cms-container.default {
    display: block;
}
#cms .cms-container.t-style {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
            "cms-section-1 cms-section-1"
            "cms-section-2 cms-section-3"
            "cms-section-4 cms-section-4"
            "cms-section-5 cms-section-6"
            "cms-section-7 cms-section-7"
            "cms-section-8 cms-section-9";
}
#cms .cms-container.tripple {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
            "cms-section-1 cms-section-1 cms-section-1"
            "cms-section-2 cms-section-3 cms-section-4"
            "cms-section-5 cms-section-5 cms-section-5"
            "cms-section-6 cms-section-7 cms-section-8"
            "cms-section-9 cms-section-9 cms-section-9"
            "cms-section-10 cms-section-11 cms-section-12";
}

#cms .cms-container.small-columns {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
            "cms-section-1 cms-section-1 cms-section-1 cms-section-1"
            "cms-section-2 cms-section-3 cms-section-3 cms-section-3"
            "cms-section-4 cms-section-4 cms-section-4 cms-section-4"
            "cms-section-5 cms-section-5 cms-section-5 cms-section-6"
            "cms-section-7 cms-section-7 cms-section-7 cms-section-7"
            "cms-section-8 cms-section-9 cms-section-10 cms-section-11";
}

@media (max-width: 992px) {
    /*Tablet*/
    #cms .cms-container.small-columns {
        grid-template-columns: 1fr;
        grid-template-areas:
            "cms-section-1"
            "cms-section-2"
            "cms-section-3"
            "cms-section-4"
            "cms-section-5"
            "cms-section-6"
            "cms-section-7"
            "cms-section-8"
            "cms-section-9"
            "cms-section-10"
            "cms-section-11";
    }
}