:root {
    --color-primary: #456990;
    --color-black: #191A23;
    --color-grey: #F3F3F3;
    --color-white: #ffffff;

    --color-text: var(--color-black);

    --fs--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
    --fs--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
    --fs-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
    --fs-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
    --fs-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
    --fs-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
    --fs-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
    --fs-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);

    --sp-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
    --sp-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
    --sp-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
    --sp-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
    --sp-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
    --sp-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
    --sp-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
    --sp-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
    --sp-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);

    /* One-up pairs */
    --sp-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
    --sp-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
    --sp-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
    --sp-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
    --sp-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
    --sp-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
    --sp-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
    --sp-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);

    /* Custom pairs */
    --sp-s-l: clamp(1rem, 0.5652rem + 2.1739vw, 2.25rem);

    --br-s: 0.5rem;
    --br-l: 3rem;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
}

img {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

body {
    font-family: Inter, sans-serif;
    font-size: var(--fs-0);
    line-height: 1.2;
    color: var(--color-black);

    margin: 0 auto;

    overflow-x: hidden;
    max-width: 96rem;
}

/*--------------------------------------------- COMPONENTS ---------------------------------------------*/
/*------------- Messages -------------*/
.conversation {
    display: grid;
}

.message {
    max-width: 20rem;
    padding: var(--sp-2xs) var(--sp-s);
    margin: var(--sp-2xs);
    background-color: #4B4B4B;
    color: var(--color-white);
    border-radius: 20px;

    justify-self: start;

    box-shadow: 0px 4px 8px 0px rgba(41, 29, 24, 0.08);
}

.message--september28 {
    max-width: none;
    margin: none;
}

.message--sent {
    background-color: #0084ff;
    margin-left: var(--sp-3xl);
    text-align: end;
    justify-self: end;
}

.message--shout {
    background-color: #ff3b30;
    font-weight: 700;
    font-size: var(--fs-4);
    max-width: none;
}

.shout--answer {
    border: solid 3px #ff3b30;
    background-color: transparent;
    color: #ff3b30
}

.conversation--horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    /*geen linebreaks*/
    padding-bottom: 25rem;
    align-items: center;
    /* gap: var(--sp-2xs); */
}

.message__img {
    border-radius: 10px;
    margin: var(--sp-2xs) 0;
    box-shadow: 0px 4px 8px 0px rgba(41, 29, 24, 0.08);
}


/*------------- Mail -------------*/
.mail {
    padding: var(--sp-m);
    border-radius: 10px;
    border: 3px solid #4B4B4B;
    background-color: #2B2B2B;

    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);

    display: grid;
    grid-template-columns: 4rem auto;
    align-items: center;

    gap: var(--sp-l);
}

.mail__title {
    font-size: var(--fs-1);
    font-weight: 600;
    margin-bottom: var(--sp-2xs);
    color: var(--color-white);
}

.mail__sender {
    font-size: var(--fs-1);
    font-weight: 600;
    color: var(--color-white);
}

.mail__message {
    line-height: 1.5;
    color: var(--color-white);
}

/*------------- Agenda -------------*/
.agenda {
    height: 16rem;
    display: flex;
    align-items: start;
    gap: var(--sp-2xs);
}

.agenda__container {
    color: var(--color-white);
    background-color: #14C3FF;
    /* background-color: #073f52; */
    margin: var(--sp-s) 0;
    padding: var(--sp-xs) var(--sp-s);
    border-radius: 20px;

    box-shadow: 0px 4px 8px 0px rgba(41, 29, 24, 0.08);
}

/* .agenda__container:nth-child(2n+1) {
    align-self: start;
}

.agenda__container:nth-child(2n+2) {
    align-self: end;
} */

.agenda__content {
    border-left: var(--color-white) solid 4px;
    padding-left: var(--sp-2xs);

    display: flex;
    flex-direction: column;

    white-space: nowrap;
    /*geen linebreaks*/
}

.agenda__time {
    font-weight: 600;
}

/*--------------------------------------------- HEADER ---------------------------------------------*/
.header {
    margin-top: var(--sp-3xl);
    margin-bottom: var(--sp-l);
    text-align: center;
    display: flex;

    align-items: center;
    justify-content: center;
    gap: var(--sp-l)
}

.header__content {
    z-index: 1;
}

.header__title {
    font-size: calc(1.5*(var(--fs-5)));
    text-transform: uppercase;
    font-weight: 900;
}

.header__subtitle {
    justify-self: left;
}

.header__subtitle--date {
    font-size: var(--fs--1);
    padding: var(--sp-2xs) var(--sp-s);
    border: 1px solid var(--color-black);
    border-radius: 100px;

    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: 600;
    justify-self: start;
}

.header__img {
    max-height: 60vh;
    transform: rotate(15deg);
}

/*--------------------------------------------- Basic styling: snippets ---------------------------------------------*/
.snippet {
    /* margin: 0 var(--sp-3xl); */
    padding: var(--sp-2xl) var(--sp-3xl);
    padding-bottom: 0;
}

.snippet__title {
    font-size: var(--fs-4);
    font-weight: 900;
}

.snippet__subtitle {
    font-size: var(--fs-1);
    padding: var(--sp-2xs);
    padding-bottom: var(--sp-l);
}

.subsubtitle {
    border-radius: 20px;
    border: solid 1px var(--color-black);
    padding: var(--sp-2xs);
    margin-bottom: var(--sp-l);
    width: fit-content;
}

.snippet__intro {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--sp-2xl);
    align-items: center;

    margin-bottom: var(--sp-l);
}

.snippet__header>.snippet__subtitle {
    padding-bottom: 0;
}

.intro__content {
    grid-column: 3;
    border-radius: 20px;
    padding: var(--sp-l);
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);
}

.intro__content--highlight {
    color: var(--color-white);
    background-color: var(--color-black);
    font-size: var(--fs-2);
    line-height: 1.5;
    font-weight: 600;
    text-align: center;
}

.underline {
    text-decoration: underline;
}

/*--------------------------------------------- 11 maart 2020 ---------------------------------------------*/
.march11__snippet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--sp-m)
}

.march11__mail,
.march11__conversation {
    background-color: var(--color-grey);
    border-radius: 20px;

    padding: var(--sp-xs);

    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);
}

.march11__mail {
    grid-column: 2;
    padding-right: var(--sp-2xs);
    padding-left: var(--sp-2xl);

    overflow: hidden;
}

.march11__conversation {
    padding-left: var(--sp-m);
    padding-right: var(--sp-m);
    padding-top: 10rem;
    grid-column: 1;
    grid-row: 1;
}

/*--------------------------------------------- 12 maart 2020 ---------------------------------------------*/

/*--------------------------------------------- lockdown ---------------------------------------------*/
.lockdown {
    color: var(--color-white);
    background-color: var(--color-black);

    font-size: calc(3*var(--fs-5));
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;

    padding: var(--sp-2xl) 0;

    border-radius: 20px;
    overflow-x: hidden;
}

.lockdown__row>p {
    display: flex;
    align-items: center;
    justify-content: center;

    display: flex;

    gap: var(--sp-l-xl);
}

.lockdown__row--1,
.lockdown__row--3 {
    justify-self: flex-start;
}

.lockdown__row--2 {
    justify-self: flex-end;
}

/*--------------------------------------------- 16 maart 2020 ---------------------------------------------*/
.march16 {
    padding-bottom: 0;
}

.march16__content {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;

    margin: var(--sp-m) 0;
}

.zoom {
    grid-row: 1;
    grid-column: 1;
}

.miguel {
    grid-row: 1;
    grid-column: 1;
}

/*------------- Zoom -------------*/
.zoom {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, min-content);

    background-color: var(--color-black);
    padding: var(--sp-xs);
    border-radius: 20px;
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);

    gap: var(--sp-2xs);
}

.zoom__member {
    background-color: #4B4B4B;
    color: var(--color-white);
    font-size: var(--fs--1);
    font-weight: 400;
    border-radius: 10px;
    position: relative;
    text-align: center;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-xs);

    box-shadow: 0px 4px 8px 0px rgba(41, 29, 24, 0.08);

}

.zoom__member--miguel {
    grid-column: 4;
    grid-row: 2;
    padding: 0;
}

/*-------------- Miguel --------------*/
.miguel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-m)
}

.miguel__img {
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);
    border-radius: 5px;
}

.miguel__content {
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);
    background-color: var(--color-white);
    border-radius: 20px;
    padding: var(--sp-m);
}

.miguel__title {
    font-size: var(--fs-5);
    font-weight: 800;
}

.miguel__intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-s);
}

.miguel__text {
    line-height: 130%;
}

.miguel__text>p+p {
    margin-top: var(--sp-xs);
}

/*--------------------------------------------- 28 september 2020 ---------------------------------------------*/
.september28 {
    padding-bottom: 0;
}

/*-------------- HATCHIE --------------*/
.hatchie {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
}

.hatchie__hatchie,
.hatchie__zakdoek,
.hatchie__corona {
    grid-row: 1;
    grid-column: 1;
}

.hatchie__hatchie {
    text-align: center;
    font-size: calc(4*var(--fs-5));
    font-weight: 100;
}

.hatchie__coronatest {
    rotate: -60deg;
}

.doctor-stamp {
    font-size: var(--fs-4);
    font-weight: 700;
    color: #d9534f;
    padding: var(--sp-xs) var(--sp-s);
    border: 2px dashed #d9534f;
    border-radius: 5px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
    width: fit-content;

    background-color: var(--color-white);
}

.doctor-stamp--1 {
    border: none;
    background-color: green;
    color: white;
    font-size: calc(2*var(--fs-5));
}

.hatchie__corona {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;

    align-items: center;

    margin-top: calc(-2*var(--sp-2xl));
}

.doctor-stamp--1 {
    grid-row: 1;
    grid-column: 2;

    rotate: -3deg;
}

.doctor-stamp--2 {
    grid-row: 1;
    grid-column: 2;

    rotate: -20deg;
}

/*-------------- Lesstijlen --------------*/
.lesstijlen {
    padding-bottom: var(--sp-m);
}

.lesstijlen__list {
    display: grid;
    grid-template-rows: 1;
    grid-template-columns: 1;

    overflow: hidden;
}

.lesstijlen__li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content;
    align-items: center;
    padding-bottom: var(--sp-l);

    grid-row: 1;
    grid-column: 1;
}

.lesstijlen__img {
    grid-column: 1;
    border-radius: 20px;
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);
}

.lesstijlen__text {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
    font-size: var(--fs-5);
    text-transform: uppercase;
    font-weight: 600;
}

/*-------------- Friends --------------*/
.october20__friends {
    padding: var(--sp-m) 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content;

    align-items: center;
    justify-items: center;
}

.october20__friends .subsubtitle {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 12rem;
    font-size: var(--fs-2);
    border-radius: 1000px;
    padding: var(--sp-m);
}

.friends {
    grid-column: 1;
    grid-row: 1;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    column-gap: var(--sp-m);
    justify-content: center;
    align-items: end;
    justify-items: center;

    /* background-color: var(--color-grey); */
    border-radius: 20px;

    padding: var(--sp-xl);
}

.friend {
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
}

.friend--anka {
    justify-self: end;
}

.friends__name {
    font-weight: 600;
    font-size: calc(3*var(--fs-5));
    width: fit-content;
    font-weight: 300;

    grid-column: 1;
    grid-row: 1;

    align-self: end;
    justify-self: center;
}

.friends__img {
    border-radius: 20px;
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);

    grid-column: 1;
    grid-row: 1;
}

.friends__img--anka {
    justify-self: end;
}

.friend--anka .friends__name {
    padding-right: var(--sp-3xl);
}

/*-------------- TEAM --------------*/
.team {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content min-content min-content;
    justify-items: center;

    background-color: var(--color-black);

    margin: var(--sp-m) 0;

    padding: var(--sp-xs);
    padding-top: var(--sp-m);
    border-radius: 20px;
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);
}

.member__img {
    border-radius: 10px;
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);
}

.team__member {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    align-items: end;
    justify-items: start;
}

.member__name {
    font-weight: 700;
    grid-row: 1;
    grid-column: 1;
    border-radius: 5px;

    z-index: 1;

    margin: var(--sp-s);
    padding: var(--sp-xs);
    background-color: var(--color-grey);
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);
}

.member__img {
    grid-row: 1;
    grid-column: 1;
}

.team__redTelephone {
    grid-column: 1 / 4;
    justify-self: center;
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);
}

.team__answer,
.team__question {
    background-color: var(--color-grey);
    padding-top: var(--sp-s);
    padding-bottom: var(--sp-s);
    margin: var(--sp-m) 0;
    grid-row: 2;
}

.team__question {
    grid-column: 1;
}

/*--------------------------------------------- 9 juni 2020 ---------------------------------------------*/
.chats {
    display: flex;
    gap: var(--sp-s);
}

.chat {
    max-height: 80vh;
    padding: var(--sp-l);
    background-color: var(--color-black);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0px 16px 32px 0px rgba(41, 29, 24, 0.08);
}

.chat__name {
    font-weight: 600;
    color: var(--color-white);
    padding: var(--sp-s);
    background-color: var(--color-black);
}

/*--------------------------------------------- juli 2021 ---------------------------------------------*/
.july17 {
    max-width: 100vw;
    overflow: hidden;
}
.trouw__imgs {
    display: grid;
    grid-template-rows: 80vh;
    grid-template-columns: repeat(5, 80vh);
    gap: var(--sp-l);
    padding-bottom: var(--sp-m);
}

.trouw__img {
    border-radius: 20px;
    object-fit: contain;
}

/*--------------------------------------------- juli 2021 ---------------------------------------------*/
.end {
    width: 100vw;
    height: 100vh;
    background-color: var(--color-black);

    display: grid;
    grid-template-columns: 1fr max-content;
    grid-template-rows: 80vh;
    overflow: hidden;
    gap: var(--sp-m);
    align-items: top;
    align-content: space-evenly;
}

.end__content {
    margin-left: var(--sp-3xl);
    color: var(--color-white);
    padding-right: var(--sp-3xl);
    align-self: end;
}

.end__text {
    padding: 0;
}

.end__text + .end__text, .end__list+.end__text {
    padding-top: var(--sp-m);
}

.end__title {
    margin-left: 0;
    padding-bottom: var(--sp-s);
}

.end__li::before{
    content: '・';
}
.end__list {
    padding-top: var(--sp-2xs);
}

.end__li + .end__li {
    padding-top: var(--sp-3xs);
}

.end__images {
    display: grid;
    grid-template-columns: min-content min-content;
    padding: var(--sp-3xl);
    gap: var(--sp-s);
}

.end__images-list {
    display: grid;
    grid-template-columns: 12vw;
    grid-template-rows: repeat(10, 30vh);
    gap: var(--sp-s);
}

.end__image {
    height: 30vh;
    border-radius: 20px;
    object-fit: cover;
}

/* .july17end {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: end;
}

.july17, .end {
    grid-row: 1;
    grid-column: 1;
} */