@import url(https://midsummer-reverie.github.io/font-face/vicenza.css);
@import url(https://midsummer-reverie.github.io/font-face/biancha.css);
@import url(https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap);

.aqrp-box {
    width: 100%;
    box-sizing: border-box;
    padding: 4.5vw;
    background: linear-gradient(0deg, rgba(19, 19, 19, 1) 25%, rgba(255, 255, 255, 0) 90%), var(--aqrp-bg);
}
.aqrp-content {
    width: 100%;
    box-sizing: border-box;
    padding: 3vw;
    background: var(--aqrp-bgcl);
    border-radius: 0.6vw;
    border: 1.75px solid var(--aqrp-cl3);
}
.aqrp-logo {
    width: 20%;
    margin: auto;
    aspect-ratio: 1 / 1;
    background: var(--aqrp-cl1);
    mask: url(https://iili.io/KJvgycx.png) center / cover;
}
.aqrp-namegrid {
    width: 80%;
    margin: 1.6vw auto 0vw;
    display: grid;
    grid-template-rows: auto 1.85vw;
    grid-template-columns: 48% 52%;
}
.aqrp-name {
    width: 100%;
    grid-area: 1 / 1 / 2 / 3;
    font: 6vw 'Vicenza';
    color: var(--aqrp-cl1);
    text-align: center;
    letter-spacing: 0.2vw;
    line-height: 1;
}
.aqrp-surname {
    width: 100%;
    grid-area: 1 / 2 / 3 / 3;
    font: 3.85vw 'Biancha';
    color: var(--aqrp-cl2);
    align-self: end;
    text-transform: lowercase;
}
.aqrp-loc {
    width: fit-content;
    max-width: 75%;
    margin: auto;
    font: 1.2vw 'Bai Jamjuree';
    font-weight: 300;
    color: var(--aqrp-cl1);
}
.aqrp-role {
    width: 95%;
    margin: 2.2vw auto;
    font: 1vw 'Bai Jamjuree';
    color: var(--aqrp-textcl);
    font-weight: 300;
    line-height: 1.8;
    text-align: justify;
}
.aqrp-note {
    width: 95%;
    margin: auto;
    box-sizing: border-box;
    padding: 0.6vw 1.45vw;
    background: var(--aqrp-cl3);
    border-radius: 1000px;
    font: 1.1vw 'Bai Jamjuree';
    color: var(--aqrp-cl2);
    font-weight: 300;
}
.aqrp-picgrid {
    width: 92%;
    margin: 3.8vw auto 0vw;
    display: grid;
    grid-template-columns: 28% 28% 28%;
    grid-template-rows: auto;
    justify-content: space-between;
    box-sizing: border-box;
}
.aqrp-pic1 {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1.75px solid var(--aqrp-cl3);
    border-radius: 0.35vw;
    background: var(--aqrp-pic1);
    grid-area: 1 / 1;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.65) inset;
}
.aqrp-pic2 {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1.75px solid var(--aqrp-cl3);
    border-radius: 0.35vw;
    background: var(--aqrp-pic2);
    grid-area: 1 / 2;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.65) inset;
}
.aqrp-pic3 {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1.75px solid var(--aqrp-cl3);
    border-radius: 0.35vw;
    background: var(--aqrp-pic3);
    grid-area: 1 / 3;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.65) inset;

}