@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&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap);
@import url(https://cdn.jsdelivr.net/gh/midsummer-reverie/font-face@refs/heads/main/holiday.css);

.pncl-gridbox {
    width: 60%;
    margin: auto;
    display: grid;
    grid-template-columns: 2vw 1fr 2vw;
    grid-template-rows: 2.5vw auto 2.15vw auto auto 2.5vw;
}
.pncl-contentbox {
    width: 100%;
    border-radius: 0.8vw;
    background: var(--pncl-cl1);
    grid-area: 1 / 2 / 7 / 3;
}
.pncl-pic {
    width: 85%;
    margin: auto;
    grid-area: 2 / 2 / 3 / 3;
    aspect-ratio: 1 / 0.6;
    background: var(--pncl-pic);
    border-radius: 0.6vw;
}
.pncl-name {
    width: 60%;
    margin-left: 3.8vw;
    grid-area: 2 / 2 / 4 / 3;
    align-self: end;
    font: 2.8vw 'Holiday';
    color: var(--pncl-cl2);
    -webkit-text-stroke: 0.4vw var(--pncl-cl1);
    paint-order: stroke fill;
    rotate: -3deg;
    line-height: 1.2;
}
.pncl-role2 {
    width: 85%;
    margin: auto;
    grid-area: 4 / 2 / 5 / 3;
    font: 1.05vw 'Bai Jamjuree';
    color: var(--pncl-txtcl);
    margin-top: 1.6vw;
    line-height: 1.3;
}
.pncl-note2 {
    width: 85%;
    margin: auto;
    grid-area: 5 / 2 / 6 / 3;
    font: 1.05vw 'Bai Jamjuree';
    color: var(--pncl-txtcl);
    margin-top: 1vw;
    text-align: right;
    font-weight: 600;
}
.pncl-icbox {
    width: 15%;
    aspect-ratio: 1 / 1;
    border-radius: 1000px;
    background: var(--pncl-cl2);
    grid-area: 2 / 2 / 3 / 4;
    z-index: 5;
    justify-self: end;
    margin-top: 2vw;
    box-sizing: border-box;
    padding: 1.4vw;
}
.pncl-icon {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--pncl-iccl);
    mask: var(--pncl-icon);
}
.pncl-deco {
    width: 7%;
    aspect-ratio: 0.3 / 1;
    background: var(--pncl-cl2);
    mask: url(https://iili.io/KH8PnP2.png) center / 95% no-repeat;
    grid-area: 4 / 1 / 6 / 3;
    align-self: end;
    margin-left: 0.55vw;
}
.lareverie {
    width: 20%;
    aspect-ratio: 9/1;
    margin: auto;
    font: 0.7vw Roboto Mono;
    font-weight: 200;
    color: #969696;
    text-align: center;
}
.lareverie::before {
    width: 20%;
    aspect-ratio: 9/1;
    margin: auto;
    content: "lareverie";
    font: 0.7vw Roboto Mono;
    font-weight: 200;
    color: #969696;
    text-align: center;

}