website/_src/_assets/scss/_hero.scss

$edge-height-sm: $spacer * 2;
$edge-height:    $spacer * 4;

.hero {
    background: $brand-07;
    padding-top: $spacer * 2;
    padding-bottom: 0;
    height: calc(100vh - #{$edge-height-sm});
    min-height: 580px;
    margin-bottom: $edge-height-sm;
    position: relative;

    @media ($screen-sm) {
        height: calc(100vh - #{$edge-height});
        margin-bottom: $edge-height;
    }

    &:after {
        content: '';
        width: 100%;
        height: $edge-height-sm;
        display: block;
        position: absolute;
        left: 0;
        background: #b3d0da;
        bottom: -($edge-height-sm);
        clip-path: polygon(0 0, 100% 0, 100% 20%, 0% 100%);

        @media ($screen-sm) {
            height: $edge-height;
            bottom: -($edge-height);
        }
    }

    .menu--main {
        background: $brand-03;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;

        &:after {
            content: '';
            width: 100%;
            height: $edge-height-sm;
            display: block;
            position: absolute;
            left: 0;
            background: $brand-03;
            bottom: -($edge-height-sm);
            clip-path: polygon(100% 0, 0 0, 0 100%);

            @media ($screen-sm) {
                height: $edge-height;
                bottom: -($edge-height);
            }
        }
    }

    .menu__link {
        color: rgba($brand-05, .8);

        &:after {
            background: rgba($brand-05, .8);
        }

        &:hover,
        &:focus,
        &.active {
            color: $brand-05;

            &:after {
                background: $brand-05;
            }

            .logo {
                fill: $brand-05;
            }
        }
    }

    .logo {
        fill: rgba($brand-05, .95);
    }
}

.hero__title {
    color: $brand-05;
    font-size: $font-size-h1 * 1.2;
    margin-bottom: $spacer;
}

.hero__description {
    font-size: $font-size-large;
    margin-top: 0;
    margin-bottom: $spacer * 2;
    color: $brand-02;
    line-height: $line-height;
}


//
// Le star base
//
.starbase {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: 4.5rem solid $brand-02;
    align-self: flex-end;

    .row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.starbase__item--stones {
    margin-bottom: -1rem;
}

.starbase__item--bicycle {
    margin-bottom: -3rem;
}

.starbase__item--towers {
    margin-bottom: -4.5rem;
}