#paapi-banner .backface {
            grid-template-areas:
    
                '...... ...... ...... ...... ...... ...... ......'
                '...... lay-01 ...... lay-02 ...... lay-03 ......'
                '...... ...... ...... ...... ...... ...... ......'
        }
    
        @media screen and (max-width:1068px) {
    
            #paapi-banner .backface
    
                {
                grid-template-areas:
    
                    '...... ...... ...... '
                    '...... lay-01 ...... '
                    '...... ...... ...... '
                    '...... lay-02 ...... '
                    '...... ...... ...... '
                    '...... lay-03 ...... '
                    '...... ...... ...... '
            }
    
        }
    
    
        #paapi-banner {
            padding: 0
        }
    
        #paapi-banner .faces,
        #paapi-banner .frontface,
        #paapi-banner .backface,
        #paapi-banner .layer {
            display: grid
        }
    
        #paapi-banner .faces {
            grid-template-areas: faces
        }
    
        #paapi-banner .frontface,
        #paapi-banner .backface {
            grid-area: faces
        }
    
        #paapi-banner .frontface {
            z-index: 1
        }
    
        #paapi-banner .backface {
            z-index: -1;
            margin-top: 230px
        }
    
        :root {
            --value: calc(calc(100vw / 3) - calc(124px / 2))
        }
    
        :root {
            --perspective: calc(var(--value) * 1.4)
        }
    
        #paapi-banner .backface {
            grid-template-columns: 1fr var(--value) 12px var(--value) 12px var(--value) 1fr
        }
    
        #paapi-banner .backface {
            grid-template-rows: 50px var(--perspective) 50px
        }
    
        #paapi-banner .layer {
            position: relative
        }
    
        #paapi-banner .layer-1 {
            grid-area: lay-01
        }
    
        #paapi-banner .layer-2 {
            grid-area: lay-02
        }
    
        #paapi-banner .layer-3 {
            grid-area: lay-03
        }
    
        @media screen and (max-width:1068px) {
            #paapi-banner .backface {
                grid-template-columns: 1fr 550px 1fr
            }
    
            #paapi-banner .backface {
                grid-template-rows: 50px var(--perspective) 12px var(--perspective) 12px var(--perspective) 50px
            }
    
            :root {
                --perspective: calc(550px * 1.4)
            }
        }
    
        @media screen and (max-width:549px) {
            :root {
                --value: calc(100vw - 10px)
            }
    
            :root {
                --perspective: calc(var(--value) * 1.4)
            }
    
            #paapi-banner .backface {
                grid-template-columns: 1fr var(--value) 1fr
            }
    
            #paapi-banner .backface {
                grid-template-rows: 50px var(--perspective) 12px var(--perspective) 12px var(--perspective) 50px
            }
        }
    
    
    
        #paapi-banner .frontface {
            width: fit-content;
            height: fit-content;
            justify-self: center
        }
    
        #paapi-banner .frontface p {
            font-size: 55px;
            font-weight: 500;
            letter-spacing: -.018em;
            display: block;
            width: 350px
        }
    
        #paapi-banner .frontface p:nth-of-type(1) {
            font-size: 19px;
            padding: 50px 0 4px
        }
    
        #paapi-banner .frontface p:nth-of-type(2) {
            font-size: 36px;
            padding-bottom: 22px
        }
    
        #paapi-banner .frontface p:nth-of-type(3) {
            font-size: 14px;
            line-height: 1.5em
        }
    
        #paapi-banner .frontface span {
            position: relative;
            padding-left: 22px;
            opacity: .66
        }
    
        #paapi-banner span::before {
            position: absolute;
            content: '';
            width: 20px;
            height: 20px;
            left: 0;
            background-position: 50% 50%;
            background-size: 100% auto;
            background-repeat: no-repeat;
            opacity: .66
        }
    
        #paapi-banner .spn-01::before {
            background-image: url(../media/paapi/date.svg)
        }
    
        #paapi-banner .spn-02::before {
            background-image: url(../media/paapi/hashtag.svg);
            background-size: 80% auto
        }
    
        @media screen and (max-width:374px) {
            #paapi-banner .frontface {
                transform-origin: 50% 50%;
                transform: scale(.8) translateX(-10px)
            }
        }
    
    
        #paapi-banner .inset {
            position: absolute;
            inset: 0;
            background-color: #fafafa;
            background-size: 80% auto;
            background-position: 50% 50%;
            background-image: url(../media/paapi/test.png);
        }
    
    
       #flatlay-banner .faces {
            grid-template-areas: 'faces';
        }
    
        #flatlay-banner {
            padding: 0
        }
    
        #flatlay-banner .faces,
        #flatlay-banner .faces>div {
            display: grid
        }
    
        #flatlay-banner .faces {
            isolation: isolate;
            overflow: hidden
        }
    
        #flatlay-banner .faces>div {
            grid-area: faces;
            width: 100vw;
            height: calc(100vw * .767);
            justify-self: center;
            position: relative
        }
    
        @media screen and (max-width:499px) {
            #flatlay-banner .faces>div {
                height: calc(100vw * 1.503)
            }
        }
    
        #flatlay-banner .frontface {
            z-index: 2
        }
    
        #flatlay-banner .backface {
            z-index: -1
        }
    
        #flatlay-banner .backface .inset {
            position: absolute;
            inset: 0;
            background-image: url(../media/flatlay/default.webp);
            background-size: cover;
            background-position: 50% 50%
        }
    
        @media screen and (max-width:9999px) {
            #flatlay-banner .backface .inset {
                background-image: url(../media/flatlay/pso-5k.jpg);
            }
        }
    
        @media screen and (max-width:2000px) {
            #flatlay-banner .backface .inset {
                background-image: url(../media/flatlay/pso-4k.jpg)
            }
        }
    
        @media screen and (max-width:1500px) {
            #flatlay-banner .backface .inset {
                background-image: url(../media/flatlay/pso-3k.jpg)
            }
        }
    
        @media screen and (max-width:1068px) {
            #flatlay-banner .backface .inset {
                background-image: url(../media/flatlay/pso-2k.jpg)
            }
        }
    
        @media screen and (max-width:735px) {
            #flatlay-banner .backface .inset {
                background-image: url(../media/flatlay/pso-1k.jpg)
            }
        }
    
        @media screen and (max-width:499px) {
            #flatlay-banner .backface .inset {
                background-image: url(../media/flatlay/pso-2s.jpg)
            }
        }
    
        @media screen and (max-width:359px) {
            #flatlay-banner .backface .inset {
                background-image: url(../media/flatlay/default-s.webp)
            }
        }