@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;

.wrapper--inner{
    padding: 0 2rem;
    margin: 0 auto;
    @include responsive(tablet){
        padding: 0 4rem;
        max-width: inherit;
    }
    @include responsive(desktop){
        padding: 0 0;
        max-width: 1200px;
    }
}

.wrapper--default{
    padding: 30px 0;
    @include responsive(tablet){
        padding: 40px 0;
    }
    @include responsive(desktop){
        padding: 50px 0;
    }
}

.text-accent{
    color: $accent-color;
    &--lighten{
        color: lighten($accent-color, 20%);
    }
    &--darken{
        color: darken($accent-color, 20%);
    }
}
.text-black{
    color: $dark-color;
    &--lighten{
        color: lighten($dark-color, 20%);
    }
    &--darken{
        color: darken($dark-color, 20%);
    }
}
.text-white{
    color: $white-color;
    &--lighten{
        color: lighten($white-color, 20%);
    }
    &--darken{
        color: darken($white-color, 20%);
    }
}

.top-margin-minus{
    margin-top: -46px;
    .wrapper{
        padding-top: 46px;
    }
}

.img-auto{
    width: 100%;
    height: auto;
}