Mão na massa 3:aplicando mixin de transição e criando partials

_reset.scss

        @include mixins.transition(color);

_header.scss

@use '../utils/mixins';
 @include mixins.transition(color) 
  @include mixins.transition(color);
  @include mixins.transition(color); 
@include mixins.transition(transform); 
@include mixins.transition (border-color, box-shadow);
 @include mixins.transition(transform);

_modals.scss

@use '../base/variables';
@use "../utils/mixins";

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: variables.$modal-bg;
    border: 1px solid #00000033;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 50rem;
    max-height: 90vh;
    padding: variables.$padding-regular;

    &.open {
        display: block;
    }

    .modal-content {
        display: flex;
        flex-direction: column;
        max-height: 80vh;
        overflow-y: auto;

        .modal-header {
            @include mixins.flexbox($justify: space-between);
            border-bottom: 1px solid variables.$modal-border-color;
            padding-bottom: 0.5rem;
            margin-bottom: variables.$margin-bottom-regular;

            .close-button {
                background: none;
                border: none;
                font-size: 1.5rem;
                cursor: pointer;
                color: variables.$primary-color;
                @include mixins.transition(color);

                &:hover {
                    color: variables.$accent-color;
                }
            }
        }

        .modal-body {
            @include mixins.flexbox($direction: column);

            img {
                max-height: 20rem;
                width: 100%;
                object-fit: contain;
                border-radius: 0.25rem;
                align-self: center;
            }
        }

        .modal-footer {
            @include mixins.flexbox();
            border-top: 1px solid variables.$modal-border-color;
            padding-top: 0.5rem;
            margin-top: 1rem;

            .close-button {
                background-color: variables.$accent-color;
                border: 1px solid variables.$accent-color;
                color: variables.$modal-bg;
                font-size: variables.$font-size-base;
                padding: 0.5rem 1rem;
                border-radius: 0.25rem;
                cursor: pointer;
                @include mixins.transition(background-color, color);

                &:hover {
                    background-color: variables.$accent-color;
                    color: variables.$modal-bg;
                }
            }
        }
    }
}

.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.modal.open~.modal-backdrop {
    display: block;
}