ul.grid-content {
    z-index: 2;
    grid-gap: 0;
    display: grid;
    overflow: hidden;
    font-size:min(20px,2.9vw);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    filter: drop-shadow(6px 6px 14px var(--cLBlackTranslucent2));
}
ul.grid-content li .ttl-45 {font-size: min(45px,6vw);}
ul.grid-content li:nth-child(-n+3) {
    position: relative;
    scale: .92;
    z-index: 1;
    display: flex;
    height: min(168px,28vw);
    flex-direction: column;
    justify-content: center;
    padding: min(2rem,5vw);
    border-radius: min(1rem,2vw);
}
ul.grid-content li:nth-child(-n+3)::before {
    position: absolute;
    content: '';
    display: block;
    inset: min(1rem,2vw);
    pointer-events: none;
    border-radius: min(.3rem,1vw);
    border: 1px solid var(--cLWhite);
}
ul.grid-content li:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
    background-color: var(--cLLightSkyBlue);
    transform-origin: left top;
}
ul.grid-content li:nth-child(2) {
    grid-area: 1 / 3 / 2 / 4;
    transform-origin: right top;
    background-color: var(--cLMintGreen);
}
ul.grid-content li:nth-child(3) {
    grid-area: 2 / 1 / 3 / 2;
    transform-origin: left top;
    transform: translateY(-3.5%);
    background-color: var(--cLPeach);
}
ul.grid-content li:nth-child(4) {
    position: relative;
    overflow: hidden;
    grid-area: 1 / 1 / 4 / 4;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../images/mask.webp);
    mask-image: url(../images/mask.webp);
}
ul.grid-content li:nth-child(4) .btn-white {
    position: absolute;
    z-index: 2;
    left: min(1rem,2vw);
    bottom: min(1rem,2vw);
    pointer-events: none;
    font-size: min(16px,3vw);
}
ul.grid-content li:nth-child(4) > img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
}