@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css");
:root {
    --space: 16px;
    /*--grey: #E2E2E2;*/
    --grey: #efefef;
    --red: rgb(240, 77, 80);
    --green: rgba(79, 186, 122, .5);
    --blue: rgba(110, 184, 230, .5);
    --yellow: rgba(241, 188, 22, .5);
    --pink: rgba(237, 126, 178, .6);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.hom {
    display: none;
}
body {
    font: 16px inter, sans-serif;
    color: #222;
}
section, #structure {
    margin: calc(var(--space)*4) var(--space);
}
section:first-of-type {
    margin-top: var(--space);
    margin-bottom: calc(var(--space)*6);
}
#testimonials {
    background: var(--grey);
    padding: var(--space) var(--space) calc(var(--space)*2) var(--space);
    margin: 0;
}
#author {
    background: var(--grey);
    margin: 0;
    padding: var(--space);
    padding-bottom: calc(var(--space)*3);
}
#author img {
    margin-bottom: var(--space);
}
section div {
    display: flex;
    flex-wrap: wrap;
}
#award {
    text-align: center;
    text-decoration: none;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: repeating-linear-gradient(
        45deg,
        rgba(241, 188, 22, .70),
        rgba(241, 188, 22, .70) 10px,
        rgba(241, 188, 22, .80) 10px,
        rgba(241, 188, 22, .80) 20px
        ); 
    grid-column: 1/3;
    margin-top: var(--space);
}
blockquote, #award p {
    line-height: 140%;
    font-style: italic;
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: var(--space);
}
#award h3 {
    margin: var(--space) 0;
}
#award i {
    font-size: 1.6rem;
}
#award p {
    font-size: 1.1rem;
    margin: calc(var(--space)/2);
    font-weight: 400;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(var(--space)*2);
}
figure i {
    font-size: 1.8em;
}

.dt-figur {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 2px;
    grid-template-areas:
        ".   .   .   tre  ."
        ".   .   .   tre  ."
        ".   .   .   fire ."
        ".   .   to  fire ."
        "et  et  to  fem  fem"
        "cap cap cap cap  cap";
    font-size: .8em;
    
}
.dt-figur div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    padding: .4em 0;
    text-align: center;
}
.dt-caption {
    grid-area: cap;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 2px !important;
}
.dt-caption div {
    font-weight: 400;
    background: var(--grey);
}
.dt-title {
    grid-column: 1/6;
    font-weight: 500 !important;
}
.indsigt {
    grid-area: et;
    background: rgba(240, 77, 80, .5);
}
.koncept {
    grid-area: to;
    background: var(--green);
}
.layout {
    grid-area: tre;
    background: var(--blue);
}
.aestetik {
    grid-area: fire;
    background: var(--yellow);
}
.interaktion {
    grid-area: fem;
    background: var(--pink);
}
#design-thinking figure p {
    text-align: center;
}


.process {
    background: var(--grey);
    padding: var(--space);
    font-size: .8em;
}
.process h3 {
    margin-bottom: calc(var(--space)/2);
}
.process p {
    margin: 0 !important;
    line-height: 140%;
}
.process i {
    font-size: inherit;
    margin-right: calc(var(--space)/2);
}
.step-1 {
    background: rgba(240, 77, 80, .5);
}
.step-2 {
    background: var(--green);
}
.step-3 {
    background: var(--blue);
}
.step-4 {
    background: var(--yellow);
}
.step-5 {
    background: var(--pink);
}
.bio {
    display: flex;
    flex-wrap: wrap;
}
footer {
    padding: var(--space);
    background: hsl(0, 0%, 40%);
}
footer p {
    font-size: .8rem;
    text-align: center;
    color: var(--grey);
    margin-bottom: var(--space) !important;
    line-height: 180%;
}
footer a {
    color: var(--grey);
}
img {
    width: 100%;
    height: auto;
    display: block;
}
#teachers img {
    margin-bottom: 0;
}
#teachers h2 {
    margin-top: calc(var(--space)*2);
}
.schools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--space)*2) calc(var(--space)*4);
    padding: var(--space);
    margin-top: var(--space);
}
.schools img {
    margin: auto;
    opacity: .60;
}
.schools img:hover {
    opacity: .70;
}
#structure {
    display: block;
    background: var(--grey);
    padding: calc(var(--space)*2) var(--space) var(--space) var(--space);
}
.chapters {
    margin: var(--space) 0;
}
h1, h2, h3 {
    font-weight: 600;
    line-height: 120%;
    margin-top: var(--space);
    letter-spacing: -.01em;
}
h1 {
    font-size: 36px;
    margin: calc(var(--space)*2) 0 var(--space) 0;
    width: 100%;
}
h2 {
    font-size: 26px;
    margin-bottom: 8px;
}
h3 {
    margin: 0 0 var(--space) 0;
    font-size: 1.2em;
}
p {
    line-height: 150%;
    margin: calc(var(--space)/2) 0;
}
p.badge {
    font-weight: 600;
    color: var(--red);
    font-size: 1em !important;
    text-transform: uppercase;
    letter-spacing: .01rem;
}
a {
    color: #222;
    font-weight: 500;
}
a:hover {
    text-decoration: none;
}
lh {
    font-weight: 600;
}
ol {
    margin: 0 30px var(--space) 30px;
    line-height: 140%;
}
ol:first-of-type, ol:last-of-type {
    list-style-type: upper-roman;
}
.btn {
    text-decoration: none;
    padding: calc(var(--space)/2) calc(var(--space)*2) 9px calc(var(--space)*2);
    margin: calc(var(--space)*1.5) auto 0 auto;
    color: white;
    font-weight: 500;
    border-radius: 25px;
    background: var(--red);
}
.btn i {
    display: none;
}

/* mobile hacks */
@media screen and (max-width: 499px) {
    #teachers img:last-of-type {
        margin-top: 60px;
    }
    #teachers div:last-of-type {
        margin-top: calc(var(--space)*3);
    }
    #author {
        margin-top: calc(var(--space)*6);
    }
    .splash {
        margin: -16px -16px 16px -16px;
    }
}

/* small */
@media screen and (min-width: 500px) {
    .schools {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .schools img {
        transition: .3s;
    }
    .schools img:hover {
        opacity: .70;
    }
    #home p {
        font-size: 1.15em;
    }
    #award {
        grid-column: 1/4;
    }
    #award p {
        font-size: 1.3em;
    }
    #award i {
        font-size: 1.7em;
    }
    .hom {
        display: block;
    }
    .hod {
        display: none;
    }
    .method-figure {
        display: grid;
        grid-template-areas: 
            "step-1  ."
            "step-1  arrow-1"
            "step-1  step-2"
            "arrow-2 step-2"
            "step-3  step-2"
            "step-3  arrow-3"
            "step-3  step-4"
            "arrow-4 step-4"
            "step-5  step-4"
            "step-5  ."
            "step-5  ."
        ;
        align-items: flex-end;
        gap: var(--space);
    }
    .step-1 {
        grid-area: step-1;
        border-color: var(--red);
    }
    .step-2 {
        grid-area: step-2;
        border-color: var(--green);
    }
    .step-3 {
        grid-area: step-3;
        border-color: var(--blue);
    }
    .step-4 {
        grid-area: step-4;
        background: var(--yellow);
    }
    .step-5 {
        grid-area: step-5;
        background: var(--pink);
    }
    .arrow-1 {
        grid-area: arrow-1;
        transform: rotate(90deg);
        transform-origin: left center;
        margin: 0 4px;
    }
    .arrow-2 {
        grid-area: arrow-2;
        justify-self: flex-end;
        transform: rotate(-90deg);
        transform-origin: right center;
        margin: 0 4px;
    }
    .arrow-3 {
        grid-area: arrow-3;
        transform: rotate(90deg);
        transform-origin: left center;
        margin: 0 4px;
    }
    .arrow-4 {
        grid-area: arrow-4;
        justify-self: flex-end;
        transform: rotate(-90deg);
        transform-origin: right center;
        margin: 0 4px;
    }
    
    #teachers div:first-of-type {
        margin-bottom: calc(var(--space)*4);
    }
    .btn {
        margin: calc(var(--space)*1.5) 0 0 0;
    }
}

/* medium */
@media screen and (min-width: 650px) {
    body {
        max-width: 650px;
        margin: 0 auto;
    }
    h1 {
        font-size: 40px;
    }
    .chapters {
        column-count: 2;
    }
}

/* desktop */
@media screen and (min-width: 900px) {
    body {
        max-width: 1100px;
        margin: 0 30px;
    }
    section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(var(--space)*3);
        align-items: flex-start;
        margin: calc(var(--space)*7) 0;
    }
    section:first-of-type {
        margin: calc(var(--space)*2) 0 calc(var(--space)*7) 0 !important;
        align-items: center;
    }
    #structure {
        margin: 0;
    }
    #testimonials, #author, #structure {
        padding: calc(var(--space)*3);
    }
    #testimonials h2 {
        margin-top: 0;
    }
    #design-thinking {
        align-items: flex-end;
    }
    .dt-figur {
        margin-bottom: .8em;
    }
    .splash {
        order: 1;
    }
    .schools {
        order: -1;
        gap: calc(var(--space)*3);
        padding: 0;
        margin-top: 0;
    }
    figure {
        margin-top: 0;
    }
    #teachers div:first-of-type {
        margin-bottom: 0;
    }
    #award i {
        font-size: 1.5em;
    }
    #award {
        margin-top: 0;
    }
    #award p {
        font-size: 1.1em;
    }
    .chapters {
        column-count: 3;
    }
    #method, #author {
        grid-template-columns: 2fr 3fr;
    }
    #method h2:first-of-type, #author p:first-of-type {
        margin-top: 0;
    }
    #author img {
        margin-top: 1px;
    }
    .btn {
        transition: .3s;
        padding-right: 1px;
        /* background: white; */
    }
    .btn:hover {
        padding-right: 19px;
        /* background: var(--grey); */
    }
    .btn:after {
        content: "\00BB";
        opacity: 0;
        margin-left: 19px;
        transition: .3s;
        font-weight: 500;
    }
    .btn:hover:after {
        

        opacity: 1;
    }
}

/* max */
@media screen and (min-width: 1100px) {
    body {
        margin: 0 auto;
    }
    h1 {
        font-size: 50px;
    }
}