body.home{--row-size-1: clamp(600px, 80vh, 1200px);--row-size-2: 600px;--row-size-3-4-5: 600px;--row-size-6: 700px;--row-size-7: auto;--row-1-angle: 0px}@media screen and (max-width: 1700px){body.home{--row-size-6: 400px}}body.home>main .layout{display:grid;grid-template-rows:var(--row-size-1) var(--row-size-2) repeat(3, var(--row-size-3-4-5)) var(--row-size-6) var(--row-size-7)}body.home>main .layout>section>div{position:relative;z-index:1}body.home>main .layout>section.row-1{content-visibility:auto;z-index:2;clip-path:polygon(0 0, 0 var(--row-1-angle), 50% var(--row-size-1), 100% var(--row-1-angle), 100% 0);display:grid;grid-template-rows:1fr;justify-content:center;gap:25px 0}body.home>main .layout>section.row-1>.baseline{color:#fff;text-align:center;align-self:center}body.home>main .layout>section.row-1>.baseline>h2{font-size:clamp(60px, 6vw, 80px);text-transform:uppercase;font-family:"Kanit",sans-serif;font-weight:900;margin:0;letter-spacing:.025em;transition:all 900ms ease-in-out;clip-path:polygon(50% 0, 50% 0, 50% 0, 50% 100%, 50% 100%, 50% 100%);position:relative;top:25px}body.home>main .layout>section.row-1>.baseline>h3{font-size:clamp(50px, 3vw, 60px);margin:5px 0;color:#672233;transition:all 600ms 350ms ease-out;clip-path:polygon(50% 0, 50% 0, 50% 0, 50% 100%, 50% 100%, 50% 100%);position:relative;top:30px}body.home>main .layout>section.row-1>.baseline.active>h2,body.home>main .layout>section.row-1>.baseline.active>h3{clip-path:polygon(-100px 0, 50% 0, 100% 0, calc(100% + 100px) 100%, 50% 100%, 0 100%);top:0}body.home>main .layout>section.row-1>.picture{position:absolute;top:-80px;left:0;width:100%;filter:brightness(0.65)}body.home>main .layout>section.row-1>.picture>video{width:100%;height:110vh;object-fit:cover;filter:brightness(1.3) grayscale(0.25)}body.home>main .layout>section.row-1>.picture>img{display:none}body.home>main .layout>section.row-2{content-visibility:auto;z-index:1;margin-top:-200px;display:grid;align-items:flex-start;grid-template-rows:200px 1fr;position:relative;overflow:hidden}body.home>main .layout>section.row-2>div{position:relative;z-index:2;width:80vw;margin:0 auto}body.home>main .layout>section.row-2>div .text{margin:25px 0;max-width:calc(40% - (25px));height:360px;overflow-y:auto;padding-right:25px}body.home>main .layout>section.row-2>div .text::-webkit-scrollbar{width:5px}body.home>main .layout>section.row-2>div .text::-webkit-scrollbar-track{background:#d3d3d3}body.home>main .layout>section.row-2>div .text::-webkit-scrollbar-thumb{background:#672233}body.home>main .layout>section.row-2>picture{display:block;position:absolute;z-index:1;top:60px;left:48%;width:100%;height:100%;opacity:.8}body.home>main .layout>section.row-2>picture:after{z-index:2;content:"";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;background:linear-gradient(to right, white 5%, transparent 25%)}body.home>main .layout>section.row-2>picture:before{z-index:2;content:"";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;background:linear-gradient(to bottom, white 5%, transparent 25%)}body.home>main .layout>section.row-3,body.home>main .layout>section.row-4,body.home>main .layout>section.row-5{content-visibility:auto;display:flex;align-items:center;position:relative;cursor:pointer}body.home>main .layout>section.row-3>div,body.home>main .layout>section.row-4>div,body.home>main .layout>section.row-5>div{position:relative;z-index:1}body.home>main .layout>section.row-3>div>p,body.home>main .layout>section.row-4>div>p,body.home>main .layout>section.row-5>div>p{color:#fff;text-align:center;font-size:x-large}body.home>main .layout>section.row-3>picture,body.home>main .layout>section.row-4>picture,body.home>main .layout>section.row-5>picture{position:absolute;top:0;left:0;width:100%;height:100%;display:block}body.home>main .layout>section.row-3>picture img,body.home>main .layout>section.row-4>picture img,body.home>main .layout>section.row-5>picture img{position:absolute;top:0;left:0;width:120%;height:120%;object-fit:cover;z-index:0;filter:brightness(0.35)}body.home>main .layout>section.row-3:hover .h1-like--inversed:after,body.home>main .layout>section.row-4:hover .h1-like--inversed:after,body.home>main .layout>section.row-5:hover .h1-like--inversed:after{width:50%}body.home>main .layout>section.row-3{top:-55px;z-index:1;clip-path:polygon(0 0, 100% 50px, 100% calc(90% - 50px), 0 100%);overflow:hidden}body.home>main .layout>section.row-4{top:-163px;clip-path:polygon(0 110px, 100% 0, 100% 100%, 0 85%)}body.home>main .layout>section.row-5{top:-251px;clip-path:polygon(0 0, 100% 90px, 100% 80%, 0 100%);z-index:1}body.home>main .layout>section.row-6{position:relative;top:-400px;z-index:0}body.home>main .layout>section.row-6>picture{position:relative;top:0;left:0;width:100%;height:100%;display:block}body.home>main .layout>section.row-6>picture img{width:100%;height:auto;min-height:900px;object-fit:cover;image-rendering:-webkit-optimize-contrast}body.home>main .layout>footer{background:rgba(255,255,255,.6);backdrop-filter:blur(3px)}@media screen and (min-width: 768px)and (max-width: 1279px){body.home{--row-size-1: 500px;--row-1-angle: 450px !important}body.home>main .layout>section.row-1>.baseline>h2{font-size:50px}body.home>main .layout>section.row-1>.baseline>h3{font-size:40px}body.home>main .layout>section.row-2>div .text{max-width:100%}}@media screen and (max-width: 768px){body.home{--row-size-1: 240px;--row-size-2: 1200px;--row-1-angle: 220px !important;--row-size-3-4-5: 500px;--row-size-6: 0px !important}body.home>main .layout>section[class*=row-] .h1-like+p{text-align:left !important}body.home>main .layout>section.row-1{position:relative}body.home>main .layout>section.row-1>.picture{top:auto;bottom:0}body.home>main .layout>section.row-1>.picture video{display:none}body.home>main .layout>section.row-1>.picture img{display:block !important;width:100%;height:var(--row-size-1);object-fit:cover}body.home>main .layout>section.row-1>.baseline>h2{font-size:30px}body.home>main .layout>section.row-1>.baseline>h3{font-size:30px}body.home>main .layout>section.row-2{margin-top:-150px}body.home>main .layout>section.row-2>div .text{max-width:100%;height:auto;padding-right:0}body.home>main .layout>section.row-2>picture{display:none}body.home>main .layout>section.row-3 p{text-align:left !important}body.home>main .layout>section.row-4{clip-path:polygon(0 110px, 100% 10px, 100% 100%, 0 85%) !important}body.home>main .layout>section.row-5{clip-path:polygon(0 15px, 100% 90px, 100% 80%, 0 100%)}body.home>main .layout>section.row-6 picture img{min-height:400px}}