planetposen/frontend/styles/layout.scss

:root {
    --width-1: 8.33%;
    --width-2: 16.66%;
    --width-3: 25%;
    --width-4: 33.33%;
    --width-5: 41.66%;
    --width-6: 50%;
    --width-7: 58.33%;
    --width-8: 66.66%;
    --width-9: 75%;
    --width-10: 83.33%;
    --width-11: 91.66%;
    --width-12: 100%
}

.col-1 {
    width:var(--width-1)
}

.col-2 {
    width:var(--width-2)
}

.col-3 {
    width:var(--width-3)
}

.col-4 {
    width:var(--width-4)
}

.col-5 {
    width:var(--width-5)
}

.col-6 {
    width:var(--width-6)
}

.col-7 {
    width:var(--width-7)
}

.col-8 {
    width:var(--width-8)
}

.col-9 {
    width:var(--width-9)
}

.col-10 {
    width:var(--width-10)
}

.col-11 {
    width:var(--width-11)
}

.col-12 {
    width:var(--width-12)
}

.offset-1 {
    margin-left:var(--width-1)
}

.offset-2 {
    margin-left:var(--width-2)
}

.offset-3 {
    margin-left:var(--width-3)
}

.offset-4 {
    margin-left:var(--width-4)
}

.offset-5 {
    margin-left:var(--width-5)
}

.offset-6 {
    margin-left:var(--width-6)
}

.offset-7 {
    margin-left:var(--width-7)
}

.offset-8 {
    margin-left:var(--width-8)
}

.offset-9 {
    margin-left:var(--width-9)
}

.offset-10 {
    margin-left:var(--width-10)
}

.offset-11 {
    margin-left:var(--width-11)
}

.offset-12 {
    margin-left:var(--width-12)
}

.col-wrap {
    padding-left: 120px;
    padding-right:120px
}

@media (max-width: 1280px) {
    .col-wrap {
        padding-left: 64px;
        padding-right:64px
    }
}

@media (max-width: 992px) {
    .col-wrap {
        padding-left: 48px;
        padding-right:48px
    }
}

@media (max-width: 768px) {
    .col-wrap {
        padding-left: 32px;
        padding-right:32px
    }
}

@media (max-width: 520px) {
    .col-wrap {
        padding-left: 12px;
        padding-right: 12px
    }
}

.col-wrap [class*="col-"] {
    float: left;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box
}

@media (max-width: 992px) {
    .col-wrap [class*="col-"] {
        padding-left: 16px;
        padding-right:16px
    }
}

@media (max-width: 520px) {
    .col-wrap [class*="col-"] {
        padding-left: 8px;
        padding-right:8px
    }
}
/*
.col-wrap::after {
    content: "";
    visibility: hidden;
    display: block;
    height: 0;
    clear:both
}
*/