@import url(https://fonts.googleapis.com/css2?family=Moderustic&family=SUSE:wght@600&display=swap);:root{--clr-white:#fff;--clr-black:#111}*{margin:0;padding:0}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--clr-white);font-family:Moderustic,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal}ul{padding:0;margin:0;list-style-type:none;display:flex;align-items:center}ul li{width:35px;height:35px;border-radius:50%;overflow:hidden;border:1px solid var(--clr-white);position:relative;transform:translatey(0);transition:.2s ease-in-out}ul li:hover{transform:translatey(-.625rem);cursor:pointer}ul li::before{position:absolute;content:"";width:100%;height:100%;background:hsla(0,0%,6.67%,.2)}ul li span{position:absolute;width:100%;height:100%;font-size:.6rem;color:var(--clr-white);top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}ul li+li{margin-left:-.625rem}ul img{width:100%;height:100%;object-fit:fill}a{display:inline-block;text-decoration:none}main{padding-block:min(20vh,2rem);width:min(70rem,90%);margin-inline:auto;color:var(--clr-black);position:relative}main .heading h1{letter-spacing:.025em;font-size:clamp(2.5rem, 1.6351rem + 4.3243vw, 6.5rem);line-height:1;font-family:SUSE,sans-serif;font-optical-sizing:auto;font-weight:600;font-style:normal}main .heading aside{margin-top:1.5em;max-width:16.25rem;display:flex;flex-direction:column;gap:.5em}main .heading aside p{font-size:.9rem;color:var(--clr-black);line-height:1.5}main .container{margin-top:2em;display:grid;gap:1.5rem}@media screen and (min-width:40rem){main .heading{display:flex;justify-content:space-between;gap:1em}main .heading aside{margin-top:3em}main .container{grid-template-columns:repeat(3,1fr);margin-top:3.5em;gap:2rem}}main .card{padding-block:1rem;background:var(--clr-white);border-radius:1.2rem;position:relative;height:24rem}main .card p{position:absolute;right:0;top:-1.25rem}main .card p a{font-size:.9rem;display:inline-block;color:var(--clr-black)}main .card p a:hover{font-weight:600}main .card .card-inner{position:relative;width:inherit;height:inherit;border-bottom-right-radius:0}main .card .card-inner .box{width:100%;height:100%;background:var(--clr-white);border-radius:1.2rem;overflow:hidden}main .card .card-inner .box .videoBox{position:relative;width:100%;height:100%;overflow:hidden}main .card .card-inner .box .videoBox iframe{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none}main .card .card-inner .box .imgBox{position:absolute;inset:0}main .card .card-inner .box .imgBox img{width:100%;height:100%;object-fit:cover;border-radius:1rem}@media screen and (min-width:53rem){main .card{border-radius:1.8rem}main .card .card-inner .box .imgBox img{border-radius:1.6rem}}main .card .card-inner .box .more{position:absolute;top:-.375rem;right:0;width:auto;display:flex;justify-content:space-between;align-items:center;background:var(--clr-white);padding:.625rem 0 .625rem .625rem;border-bottom-left-radius:1rem}main .card .card-inner .box .more::before{position:absolute;content:"";top:.375rem;left:-1.188rem;background:0 0;width:1.2rem;height:1.2rem;border-bottom-right-radius:2rem;box-shadow:.313rem .313rem 0 .313rem var(--clr-white);transform:rotate(-90deg)}main .card .card-inner .box .more::after{position:absolute;content:"";bottom:-1.188rem;right:-.063rem;background:0 0;width:1.2rem;height:1.2rem;border-bottom-right-radius:1rem;box-shadow:.313rem .313rem 0 .313rem var(--clr-white);transform:rotate(-90deg)}main .card .card-inner .box .more .arrow{width:2.5rem;height:2.5rem;border:.125rem solid #c8c8c8;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s ease-in-out}main .card .card-inner .box .more .arrow:hover{background:var(--clr-black);border:.125rem solid var(--clr-black);color:var(--clr-white)}main .card .card-inner .box .more .arrow:hover svg{color:var(--clr-white)}main .card .card-inner .box .more svg{width:1.063rem;color:var(--clr-black)}main .card .card-inner .box .tag{position:absolute;bottom:-.375rem;left:0;width:auto;display:flex;justify-content:space-between;align-items:center;background:var(--clr-white);padding:.625rem .625rem .625rem 0;border-top-right-radius:1rem}main .card .card-inner .box .tag::before{position:absolute;content:"";top:-1.188rem;left:0;background:0 0;width:1.2rem;height:1.2rem;border-bottom-right-radius:2rem;box-shadow:.313rem .313rem 0 .313rem var(--clr-white);transform:rotate(90deg)}main .card .card-inner .box .tag::after{position:absolute;content:"";bottom:.375rem;right:-1.188rem;background:0 0;width:1.2rem;height:1.2rem;border-bottom-right-radius:1rem;box-shadow:.313rem .313rem 0 .313rem var(--clr-white);transform:rotate(90deg)}main .card .card-inner .box .tag a{font-size:.8rem;color:var(--clr-black);font-weight:400;border:.125rem solid #c8c8c8;border-radius:3.125rem;padding:.313rem .625rem;display:inline-block;cursor:pointer;transition:.2s ease-in-out}main .card .card-inner .box .tag a:hover{color:var(--clr-white);background:var(--clr-black);border:.125rem solid var(--clr-black)}main .video{height:20rem;align-self:flex-end}.poster{position:relative;display:inline-flex}.poster:after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:url("../../assets/img/young-woman-taking-photo-with-her-phone-beautiful-mountain-view.webp") 0 0/cover;transition:1s;opacity:.8;cursor:pointer}.poster-active:after{opacity:0;pointer-events:none}