#Banner
{
    --img: url(../../../img/covers/cover-desktop-03.jpg);
}

#HowWeWork > .content.headline-display
{
    --rows: 3;
    --inside-horizontal-margin: calc(var(--display-gap) * .5);
}

#HowWeWork > .content > figure
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#HowWeWork > .content > figure figcaption
{
    margin: var(--column-gap);
}

#HowWeWork > .content > figure::before
{
    content: '';
    display: block;
    aspect-ratio: 16 / 9;
    background-image: var(--img);
    background-size: contain;
    background-position: left top;
    background-repeat: no-repeat;
    margin: var(--column-gap);
    height: var(--display-gap);
    position: relative;
    mask-image: unset;
    background-color: unset;
    z-index: 1;
}

#HowWeWork > .content > figure.growthpath::before
{
    --img: url('../../../img/elements/growthpath.svg');
}

#HowWeWork > .content > figure.ime::before
{
    --img: url('../../../img/elements/ime.svg');
}

#HowWeWork > .content > figure:first-child::before,
#HowWeWork > .content > figure:first-child > figcaption
{
    grid-column: pos-first / pre-division 3;
}

#HowWeWork > .content > figure:last-child::before,
#HowWeWork > .content > figure:last-child > figcaption
{
    grid-column: pos-middle / pre-last;
}

@media (max-width: 1280px) {
    #Banner
    {
        --img: url(../../../img/covers/cover-laptop-03.jpg);
    }
}

@media (max-width: 960px) {
    #Banner
    {
        --img: url(../../../img/covers/cover-tablet-03.jpg);
    }

    #HowWeWork > .content > figure
    {
        aspect-ratio: 4 / 5;
        background-color: var(--background);
        border-radius: calc(var(--base-size) * 2);
    }

    #HowWeWork > .content > figure > img
    {
        mask-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    }

    #HowWeWork > .content.headline-display
    {
        --grid-row-gap: var(--display-gap);
    }

    #HowWeWork > .content.headline-display > .content
    {
        align-self: end;
        margin-bottom: var(--row-gap);
    }
}

@media (max-width: 480px) {
    #Banner
    {
        --img: url(../../../img/covers/cover-mobile-03.jpg);
    }
}