demo.scss

@use './scss/media.scss';
@use 'sass:math';
@use 'sass:string';
@use './scss/animation.scss';
@use './scss/arrow.scss';

$breakpoints: (
    "first": 320px,
    "second": 480px,
    "third": 760px,
    "fourth": 1024px,
    "fifth": 1440px
);

@include media.config($breakpoints);
@include media.breakpoint-visualizer;

// reset
*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.breakpoint-visualizer {
    @include media.config($breakpoints);

    @include media.breakpoint-visualizer {
        background-color: transparent;
        color: #d6b85e;
    }
}

.full-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: rgb(75, 110, 185);
}

.title {
    padding: 0 24px;
    color: #ccc;
    font-size: 2.8rem;
}

.arrow {
    @include arrow.arrow($color: #ccc);

    &--left {
        transform: rotate(180deg);
    }
}

.arrow-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 1.4rem 0;
    @include animation.new-animation(width, min(40rem, 100%), 10rem, 1.4s ease-out infinite);
}