main{width:800px}.slide-row{display:flex;width:3200px;transition:.5s}.slide-col{position:relative;width:800px;height:500px}.hero{position:absolute;top:60px;right:0;height:100%}.hero img{height:400px;border-radius:10px;width:700px;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-content{position:absolute;left:0;top:50%;transform:translateY(-50%);width:520px;height:200px;color:#4d4352;background:#ffffffb3;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(4.5px);-webkit-backdrop-filter:blur(4.5px);border-radius:10px;padding:30px;z-index:2;-webkit-user-select:none;user-select:none}.slider-content p{font-weight:400}.slider-content h2{font-size:1.5rem;font-weight:600;margin-top:35px;color:#4d4352}.indicator{display:flex;justify-content:center;margin-top:4rem}.indicator .slide-btn{display:inline-block;height:15px;width:15px;margin:4px;border-radius:15px;background:#fff;cursor:pointer;transition:all .5s ease-in-out}.slide-btn.active{width:30px;background:#bfbcbc}.slider{width:100%;overflow:hidden}@media (max-width: 850px){main{width:500px}.slide-row{width:2000px}.slide-col{width:500px;height:250px}.hero img{width:200px}.slider-content{width:320px;height:200px;padding:20px}.slider-content p{font-size:.9rem}.slider-content h2{font-size:1.2rem;margin-top:20px}}@media (max-width: 550px){main{width:300px}.slide-row{width:1200px}.slide-col{width:500px;height:300px}.hero{top:60%;height:100px;z-index:5}.hero img{width:100px}.slider-content{width:300px}}