/* ----------------- Home Grid ------------------ */

#pts-box div {transition: font-weight .5s;}
#pts-box .BfrFrame, #pts-box .AftrFrame {font-weight: 300;}
#pts-box .OnFrame {font-weight: 600;}

#txt-box {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#txt-box a {
    position: absolute;
    width: calc(100% - 2rem);
    top: 0;
    left: 0;
    padding: 0 1rem;
    transition: transform .5s ease-in-out;
    background-color: var(--secondary-color);
}

a.BfrFrame , a.AftrFrame {display: none;}

.grid-a-cpt.BfrFrame , .grid-a-cpt.AftrFrame {display: block;}
.grid-a-cpt p {width: unset;}

a.OnFrame { z-index: 4; }

.image {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .5s ease-in-out;
    z-index: 2;
}

#img1 .BfrFrame, .grid-a-cpt.BfrFrame {transform: translateX(100%);}
#img1 .AftrFrame, .grid-a-cpt.AftrFrame {transform: translateX(-100%);}

#img2 .BfrFrame {transform: translateY(-100%);}
#img2 .AftrFrame {transform: translateY(100%);}

#img3 .BfrFrame {transform: translateY(100%);}
#img3 .AftrFrame {transform: translateY(-100%);}

.BfrFrame {z-index: 0;}
.AftrFrame {z-index: 1;}
.Rv.BfrFrame {z-index: 1;}
.Rv.AftrFrame {z-index: 0;}

#grid {
    display: grid;
    width: 85vw;
    min-width: 1000px;
    height: 90%;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 1rem;
    grid-template-areas: 
        "ttl img1 img2"
        "img3 img1 img2"
        "img3 capt void";
    /* background-color: aqua; */
    transform: translateX(7%);
    margin-top: 1rem;
    overflow: visible;
}
@media (max-width: 815px) {#grid{max-width: 25rem;}}

#page-btn-OnGrid {
    height: unset;
    width: unset;
    grid-area: pbtn;
    display: none;
}
@media (min-width: 400px) {
    #page-btn-OnGrid {
        height: 110px;
        aspect-ratio: 1/1;
    }
}

#min-arw {
    height: unset;
    width: unset;
    stroke: var(--background-color); 
    stroke-width: .6rem;
    overflow: hidden;
}
#page-btn #min-arw {
    height: 4.75rem;
    aspect-ratio: 1/1;
}

#anim-min-arw path {
    animation: Slide 7s ease-in-out infinite;
    transition: transform 1s ease ;
}
@keyframes Slide {
    0% {transform: translate(0, 0);}
    1% {transform: translate(0, 0);}
    3% {transform: translate(200px, -200px);}
    3.01% {transform: translate(-360px, 360px);}
    11% {transform: translate(0, 0);}
    100% {transform: translate(0, 0);}
}

@media (max-height : 420px) {
    #img2 {display: none;}
    #grid {
        min-width: unset;
        grid-template-areas: 
            "img3 img1 ttl"
            "img3 img1 ttl"
            "img3 capt void";
    }
}

@media (max-width: 815px) {
    #img2, #img3 {display: none;}

    #page-btn-OnGrid {display:block;}

    #grid {
        margin-bottom: 0;
        height: 70%;
        min-width: unset;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr 3fr 2fr;
        transform: translateX(0);
        grid-template-areas: 
            "ttl ttl pbtn"
            "img1 img1 img1"
            "capt capt capt";
    }
}

.grid-win {
    border-radius: 1rem;
    overflow:hidden;
    z-index: 0;
    transition: transform .5s ease;
}
.grid-win:hover {transform: scale(1.02);}

#img1 {
    grid-area: img1;
    background-color: var(--secondary-color);
    border-radius: 2rem;
}

#img2 {
    grid-area: img2;
    background-color: var(--secondary-color);
    border-radius: 100rem 100rem 100rem 20rem;
}

#img3 {
    grid-area: img3;
    background-color: var(--secondary-color);
    border-radius: 100rem 100rem 20rem 20rem;
}


.shaky {
    animation: Shake .5s ease-in;
}

#ttl {
    grid-area: ttl;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-color);
    border-radius: 100rem;
    transform: rotate(-10deg);
}

@keyframes Shake {
    0% {transform: rotate(-10deg);}
    33% {transform: rotate(-20deg);}
    66% {transform: rotate(0deg);}
    100% {transform: rotate(-10deg);}
}

#ttl h2 {
    width: 100%;
    font-size: 2.8rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0;
    hyphens: manual;
    pointer-events: none;
}

@media (max-width: 815px) {#ttl h2 {font-size: 2.3rem;}}

#caption {
    grid-area: capt;
    background-color: var(--secondary-color);
    padding: 0 0rem 1rem 0rem;
}

#frm-pssr {
    position: absolute;
    width: 9rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    justify-content: space-between;
}

.grid-ctrl-btns{
    height: 4rem;
    width: 4rem;
    display: flex;
    font-family: "Space Grotesk", sans-serif;
    align-items: center;
    border-radius: 1rem;
    color: var(--background-color);
    background-color: var(--text-color);
    transform: translateY(0);
    transition: transform .5s ease;
    z-index: 5;
}
.grid-ctrl-btns:hover {transform: translateY(-.3rem);}
/* @media (max-width: 815px){.grid-ctrl-btns:hover {transform: translateY(0);}} */

#frm-pssr * {
    font-weight: 300;
    font-size: 3.5rem;
    justify-content: center;
}

#page-btn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    width: fit-content;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0 1rem;

}
#page-btn p {
    min-width: unset;
    max-width: none;
    width: 5rem;
    color: var(--background-color);
    margin: 0;
    text-align: left;
    font-size: 1.4rem;
    font-weight: 500;
}
@media (max-width: 815px) {#page-btn {display: none;}}

#pts-box {
    height: 1rem;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: .5rem;
    /* background-color: aqua; */
}

#pts-box div {margin: 0 .4rem;}

.grid-a, .grid-a-cpt {
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: aqua; */
    width: 100%;
    height: 100%;
}
.grid-a-cpt {
    position: relative;
    display: block;
}

#Prv-Env, #Nxt-Env {z-index: 5;}

.ElmtClic {
    animation: ClicTrans .3s ease;
    transition: transform .3s ease;
}
@keyframes ClicTrans {
    0% {transform: translateY(0);}
    50% {transform: translateY(.3rem);}
    100% {transform: translateY(0);}
}