//- 💫 CSS > COMPONENTS > ASIDES

//- Aside container

.c-aside
    position: relative


//- Aside content

.c-aside__content
    background: $color-front
    z-index: 10

    @include breakpoint(min, md)
        @include position(absolute, top, left, -3rem, calc(100% + 5.5rem))
        width: calc(#{$aside-width} + 2rem)

        // Banner effect

        &:after
            $triangle-size: 2rem

            @include position(absolute, bottom, left, -$triangle-size / 2, 0)
            @include size(0)
            border-color: transparent
            border-style: solid
            border-top-color: $color-dark
            border-width: $triangle-size / 2 0 0 $triangle-size
            content: ""

    @include breakpoint(max, sm)
        display: block
        margin: 2rem 0


//- Aside text

.c-aside__text
    color: $color-back
    padding: 1.5rem 2.5rem 3rem 2rem