/* Classes
========================================================================== */
.clear {
    @extend %clearfix;
}
%center {
    margin: 0 auto;
}
%trbl {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
%full-size {
    width: 100%;
    height: 100%;
}


/* Containers
========================================================================== */
// Wrap (global)
.wrap {
    max-width: 1648px;
    margin: 0 auto;
    padding: 0 16px;

    @include breakpoint (m) {
        padding: 0 24px;
    }
    @include breakpoint (sm) {
        padding: 0 60px;
    }
    @include breakpoint (md) {
        padding: 0 128px;
    }
}

// Wrapper (inside and more spaced)
.wrapper {
    max-width: calc(892px + 32vw);
    margin: 0 auto;
    padding: 0 pxVW(128);

    @include breakpoint (sm) {
        padding: 0 pxVW(224);
    }
    @include breakpoint (xxl) {
        padding: 0 224px;
    }
}
