Mão na massa: adicionando responsividade com Sass

cards.scss

cardy body

 @include mixins.respond-to(small) {
            padding: 0.5rem;
        }

        @include mixins.respond-to(medium) {
            padding: 0.75rem;
        }

        @include mixins.respond-to(large) {
            padding: variables.$padding-regular;
        }

tag h3

 @include mixins. respond-to(small) {
            font-size: 1.375 rem;
        }

        @include mixins. respond-to(medium) {
            font-size: 1.5625 rem;
        }

        @include mixins. respond-to(large) {
            font-size: 1.75 rem;
        }

tag h5

  @include mixins. respond-to(small) {
            font-size: variables.$font-size-base;
        }

        @include mixins. respond-to(medium) {
            font-size: 1.125 rem;

        }

        @include mixins. respond-to(larg) {
            font-size: 1.25 rem;
        }

tag p

@include mixins. respond-to(small) {
        margin-bottom: 0.75 rem;
    }

    @include mixins. respond-to(medium) {
        margin-bottom: 0.85 rem;
    }

    @include mixins. respond-to(larg) {
        mrgin-bottom: variables.$margin-bottom-regular;
    }

forms.scss

input, select.

@include mixins.respond-to(small) {
    font-size: 0.875 rem;
    padding: 0.5 rem;
}

@include mixins. resond-to(medium) {
    font-size: 0.95 rem;
    padding: 0.6 rem;
}

form-group label

@include mixins.respond-to(small) {
    margin: 0.25rem;
}

tag h3

@include mixins.respond-to(small) {
        font-size: 1.25 rem;
    }

    @include mixins.respond-to(medium) {
        font-size: 1.5 rem;
    }

contact-container

@include mixins.respond-to(small) {
    padding: variables.$padding-regular;
    margin: 3 rem auto;
    width: 75%;
}

@include mixins.respond-to(medium) {
    padding: variables.$padding-regular;
    margin: 3 rem auto;
    width: 75%;
}

modals.scss

modal.

@include mixins .respond-to(small) {
        padding: 0.5 rem;

        @include mixins .respond-to (medium) {
            max-width: 90%;
            padding: 0.75 rem;
        }

modal-header

@include mixins . respond-to(small) {
                    padding-bottom: 0.25 rem;
                    margin-bottom: 0.5 rem;
                }

close-button

 @include mixins.respond-to(small) {
                font-size: 1.25 rem;
            }

modal-body img

 @include mixins.respond-to(small) {
                max-height: 14 rem;
                max-width: 50%;
            }

            @include mixins. respond-to(medium) {
                max-height: 18 rem;
            }

modal. footer.

@include mixins .respond-to(small) {
                    padding-top: 0.25 rem;
                    margin-top: 0.5 rem;
                }

.close-button dentro de .modal-footer.

@include mixins.respond-to(small) {
                        font-size: 0.875 rem;
                        padding: 0.4 0.8 rem;
                    }

header.scss

.navbar

@include mixins.respond-to(small) {
   }

.navbar-brand img

   max-width: 7.5 rem;
        transition: opacity 0.3s ease;
    }

.navbar-menu

    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 4 rem;
    right: 0;
    background-color: variables.$secondary-color;
    width: 100%;
    padding: variables.$padding-regular;
    z-index: 10;

    &.open {
        display: flex;
    }
.navbar-nav {
        flex-direction: column;
        gap: 1 rem;
        .nav-link,
        .toggle-text {
            font-size: 0.875 rem;
        }
    }
}

navbar-toogle

 display: block;

home.scss

tag h2

@include mixins.repond-to(medium) {
    font-size: 4 rem;

}

@include mixins.repond-to(small) {
    font-size: 2.5 rem;
    line-height: 4 rem;

}

tag p

@include mixins .repond-to(small) {
    font-size: variables.$font-size-base;
}

h2 dentro de .banner &.banner-2

@include mixins .repond-to(small) {
    font-size: 1.75 rem;
}

.services-container.

@include mixins .repond-to(medium) {
    flex-direction: colum;
}

@include mixins .respond-to(small) {
    flex-direction: colum;
}