.slider{height:80vh;position:relative}.slider .list .item{opacity:0;transition:all .5s;position:absolute;inset:0;overflow:hidden}.slider .list .item img{object-fit:cover;width:100%;height:100%}.slider .list .item:after{content:"";background-image:linear-gradient(#0000,#000 60%);width:100%;height:100%;position:absolute;bottom:0;left:0}.slider .list .item .content{z-index:1;width:600px;max-width:80%;position:absolute;top:15%;left:120px}.slider .list .item .content p:first-child{text-transform:capitalize;font-size:20px}.slider .list .item .content h2{color:#fff;margin:0;font-size:50px}.slider .list .item .content p{color:#fff}.slider .list .item.active{opacity:1;z-index:10}@keyframes showContent{to{filter:blur();opacity:1;transform:translateY(0)}}.slider .list .item.active p:first-child,.slider .list .item.active h2,.slider .list .item.active p:nth-child(3){filter:blur(20px);opacity:0;animation:.5s ease-in-out .7s forwards showContent;transform:translateY(30px)}.slider .list .item.active h2{animation-delay:1s}.slider .list .item.active p:nth-child(3){animation-duration:1.3s}.arrows{z-index:100;position:absolute;top:20%;right:50px}.arrows button{color:#eee;background-color:#eee5;border:none;border-radius:5px;width:40px;height:40px;font-family:monospace;font-size:x-large;transition:all .5s}.arrows button:hover{color:#000;background-color:#eee}.thumbnail{z-index:11;box-sizing:border-box;justify-content:center;align-items:flex-end;gap:10px;width:100%;height:250px;padding:0 50px;display:flex;position:absolute;bottom:0;overflow:auto}.thumbnail::-webkit-scrollbar{width:0}.thumbnail .item{filter:brightness(.5);flex-shrink:0;width:150px;height:50%;margin-bottom:50px;transition:all .5s}.thumbnail .item img{object-fit:cover;border-radius:10px;width:100%;height:100%}.thumbnail .item.active{filter:brightness(1.5)}.thumbnail .item .content{position:absolute;inset:auto 10px 10px}@media screen and (max-width:678px){.thumbnail{justify-content:start}.slider .list .item .content h2{font-size:36px}.arrows{top:10%}.slider .list .item .content{left:30px}.thumbnail .item{margin-bottom:30px}.slider .list .item .content p{font-size:14px}}