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

#HowToWork
{
    --rows: 2;
}

#HowToWork::after,
#HowToWork::before
{
    grid-column: pos-division 2 / pre-last;
}

#HowToWork > figure
{
    grid-row: pre-first / pos-last;
    grid-column: pos-first / pre-division 2;
}

#HowToWork > header
{
    grid-column: pos-division 2 / pre-middle 5;
}

#HowToWork > article
{
    display: grid;
    grid-template-columns: subgrid;
    grid-row: pos-row 1 / pre-footer-gap;
    align-self: start;
}


#HowToWork > article > header
{
    order: 1;
    margin-bottom: calc(var(--base-size) * 1.333334);
}

#HowToWork > article > .content
{
    order: 3;
}

#HowToWork > article::before
{
    content: '';
    display: block;
    border-bottom: 1px solid var(--text-color);
    margin-bottom: var(--row-gap);
    grid-column: 1 / -1;
    order: 2;
}

#HowToWork > article:nth-of-type(1)
{
    grid-column: pos-division 2 / division 4;
}

#HowToWork > article:nth-of-type(1) > header,
#HowToWork > article:nth-of-type(1) > .content
{
    grid-column: pos-division / pre-middle 2;
}


#HowToWork > article:nth-of-type(2)
{
    grid-column: division 4 / pre-last;
    text-align: right;
}

#HowToWork > article:nth-of-type(2) > header,
#HowToWork > article:nth-of-type(2) > .content
{
    grid-column: pos-middle / pre-last;
}

#HowToWork > .diagram
{
    grid-column: middle 4 / middle 5;
    grid-row: pos-row 1 / pre-footer-gap;
    aspect-ratio: 1;
    border: 1px solid var(--text-color);
    background-color: var(--background);
    border-radius: 100vw;
    z-index: 2;
}

#HowToWork > .diagram::before
{
    content: '';
    aspect-ratio: 1;
    display: block;
    background-color: var(--emphasis-color);
    /* border-radius: 100vw; */
    margin: var(--half-gap);
    mask-image: url(../../../img/elements/circle-arrows.svg);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    animation-name: rotation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

#HowToWork > footer
{
    grid-column: pos-division 2 / pre-last;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#Learningship
{
    --rows: 3;
    --headlabel-gap: calc(var(--row-gap) * 1.5);
    --grid-row-gap: var(--row-gap);
    --inside-bottom-margin: calc(var(--row-gap) * .5);
    --outside-bottom-margin: var(--inside-bottom-margin);
}

#Learningship > .content
{
    grid-column: pos-first / pre-division 4;
}

#Learningship > .content:last-of-type
{
    grid-row: pos-row 2 / pre-last;
}

#Learningship .graph
{
    grid-column: pos-first / pre-last;
    grid-row: pos-row 1 / pre-row 2;   
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 1fr;
    gap: calc(var(--base-size) * .6666667);
}

#Learningship .graph article
{
    --grow: 1.33333334;
    counter-increment: opac;

    grid-row: 1 / span 1;
    grid-column: span calc(10 * var(--percent));
    display: flex;
    flex-direction: column;
    gap: var(--base-size);
    padding: calc(var(--base-size) * 1.5);
    box-sizing: border-box;
    color: var(--background);
    overflow: hidden;
    border-radius: var(--base-size);
}

#Learningship .graph article:has(br)
{
    --grow: 3;
    flex-direction: row;
    gap: calc(var(--base-size) * 1.5);
    align-items: center;    
}

#Learningship .graph article > p
{
    color: var(--background);
    --grow: 1;
}

#Learningship .graph article:has(br)::before
{
    font-weight: 100;
}

#Learningship .graph article::before
{
    --font-size: calc(var(--base-size) * var(--grow));
    counter-reset: percent calc(var(--percent) * 100);
    content: counter(percent) '%';
    font-size: var(--adjusted-font-size);
    line-height: var(--font-size);
}

#Learningship .graph article::after
{
    content: '';
    background-color: var(--emphasis-color);
    display: block;
    position: absolute;
    opacity: calc(1 / var(--order));
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

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


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

    #HowToWork > header,
    #HowToWork > footer,
    #HowToWork::before,
    #HowToWork::after
    {
        grid-column: pos-first / pre-last;
    }

    #HowToWork > figure
    {
        display: none;
    }

    #HowToWork > .diagram
    {
        grid-column: middle 3 / middle 4;
        background-color: var(--hardlight);
        border: 4px solid var(--background);
        align-self: center;
    }
    
    #HowToWork > article
    {
        background-color: var(--hardlight);
        border-radius: calc(var(--base-size) * 2);
        padding: var(--column-gap);
        display: flex;
        flex-direction: column;
        gap: var(--row-gap);
    }
    
    #HowToWork > article::before
    {
        display: none;
    }

    #HowToWork > article:nth-of-type(1)
    {
        grid-column: pos-first / pos-middle 3;
    }

    #HowToWork > article:nth-of-type(2)
    {
        grid-column: pre-middle 4 / pre-last;
        text-align: right;
    }

    #Learningship > .graph
    {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(10, 1fr);
    }

    #Learningship > .graph article
    {
        grid-column: 1 / span 1;
        grid-row: span calc(10 * var(--percent));
        --grow: 3;
        flex-direction: row;
        gap: calc(var(--base-size) * 1.5);
        align-items: flex-end !important;
    }
    
    #Learningship .graph article::before
    {
        font-weight: 100;
    }
}

@media (max-width: 480px) {

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

    #HowToWork > .diagram
    {
        width: 33.333333%;
        justify-self: center;
        margin: calc(var(--display-gap) * -.5) 0;
    }

    #HowToWork > article:nth-of-type(2)
    {
        text-align: left;
    }
}