Mão na massa 2:Aplicando o mixin flexbox no serenato.

_cards.scss

 @include mixins.flexbox($direction: column);

_header.scss

 @include mixins.flexbox($justify: space-around);
    }
      @include mixins.flexbox($justify: space-between);
    }
 @include mixins.flexbox($align: start, $direction: column);
 

_home.scss

 @include mixins.flexbox($direction: column);

_buttons.scss

@use "../base/variables";
@use 'sass:color';

.btn {
    color: variables.$secondary-color;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: variables.$border-radius;
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    margin-top: 1rem;
    font-size: variables.$font-size-base;
    line-height: 1.5;
    background-color: variables.$accent-color;
    transition: background-color variables.$transition-duration ease-in-out;

    &:hover {
        background-color: color.adjust(variables.$accent-color, $lightness: -10%);
        border-color: color.adjust(variables.$accent-color, $lightness: -10%);
    }

    &:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(variables.$primary-color, 0.5);
    }
}

_forms.scss

@use "../base/variables";
input,


select {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: variables.$font-size-base;
    line-height: 1.5;
    color: variables.$primary-color;
    background-color: variables.$secondary-color;
    background-clip: padding-box;
    border: 1px solid variables.$form-border-color;
    border-radius: variables.$border-radius;
    transition: border-color variables.$transition-duration ease-in-out, box-shadow variables.$transition-duration ease-in-out;

    &:focus {
        border-color: variables.$accent-color;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(variables.$accent-color, 0.25);
    }
}

.form-group {
    margin-bottom: variables.$margin-bottom-regular;

    label {
        display: block;
        margin: 0.5rem;
    }
}