//- 💫 CSS > COMPONENTS > ASIDES

//- Aside container

.c-aside
    position: relative


//- Aside content

.c-aside__content
    background: $color-front
    border-top-left-radius: $border-radius
    border-bottom-left-radius: $border-radius
    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, $border-radius / 2)
            @include size(0)
            border-color: transparent
            border-style: solid
            border-top-color: $color-dark
            border-width: $triangle-size / 2 0 0 calc(#{$triangle-size} - #{$border-radius / 2})
            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