.data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-35810ad{--display:flex;--flex-direction:column;--container-data-hxm-width:100%;--container-data-hxm-height:initial;--container-data-hxm-flex-grow:0;--container-data-hxm-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-e9bd0f9 > .data-eoa-data-hxm-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-d0c48a1 > .data-eoa-data-hxm-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-e480ccb > .data-eoa-data-hxm-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-2ce8525{--display:flex;--flex-direction:column;--container-data-hxm-width:100%;--container-data-hxm-height:initial;--container-data-hxm-flex-grow:0;--container-data-hxm-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-2ce8525:not(.data-eoa-motion-effects-dynamic-type-background), .data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-2ce8525 > .data-eoa-motion-effects-container > .data-eoa-motion-effects-layer{background-color:#FFFFFF;}.data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-2ce8525, .data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-2ce8525::before{--border-transition:0.3s;}@media(min-width:768px){.data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-2ce8525{--width:100vw;}}.data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-35810ad { height:0; } h1, .title-row h1 { color: #fff !important; } .data-eoa-3851 .data-eoa-dynamic.data-eoa-dynamic-20ce9dd img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .containerblog { width: 100vw; height: 100vh; overflow: hidden; cursor: pointer; } .cursor { position: absolute; top: 0; left: 0; width: 125px; height: 125px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border-radius: 100%; pointer-events: none; z-index: 2; transition: .15s ease-out } .cursor p { font-size: 1em; color:#fff; } .story-img { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; filter:brightness(35%); } .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .story-content { position: absolute; padding: 4em 0; top: 50%; left: 36%; transform: translate(-50%, -50%); width: 30%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .indices { width: 100%; height: 10px; display: flex; justify-content: space-between; align-items: center; gap: 0.55em; } .index { position: relative; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.15); } .index-highlight { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: #fff; transform: scaleX(100%); } .profile { width: 100%; height: 60px; display: flex; gap: 1em; align-items: center; } .profile-icon { position: relative; width: 50px; height: 50px; border-radius: 100%; overflow: hidden; } .profile-name { position: relative; width: 200px; height: 20px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); line-height: 1rem; filter:invert(100%); font-size:1.2rem; } .title-row { position: relative; width: 800px; height: 50px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transform: scale(1.2); transform-origin: left; } .link { position: relative; width: max-content; margin: 2em 0; padding: 0.25em 0; filter:brightness(22222%); font-size:1.2rem; } .link::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: #fff; } .title-row h1 { position: absolute; top: 0; font-size:2.9rem; line-height: 2.65rem; } .profile-name p { position: absolute; top: 0; } @media (max-width: 900px) { html, body { cursor: default; } .story-content { width: 100%; padding: 2em; top:44%; } .title-row h1 { position: absolute; top: 0; font-size:6vw; line-height: 5vw; } .profile-name p { position: absolute; top: 0; } .profile { width: 100%; height: 0px; display: flex; gap: 1em; align-items: center; } .link { position: relative; width: max-content; margin: 1em 0; padding: 0.25em 0; filter:brightness(22222%); font-size:1.2rem; } .title-row { position: relative; width: 800px; height: 26px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .indices { width: 100%; height: 177px; display: flex; justify-content: space-between; align-items: center; gap: 0.25em; } .cursor { display: none; } .containerblog { width: 100vw; height: 100vh; overflow: hidden; cursor: pointer; } .story-content { left: 50%; } }