.capsule{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #fff}.capsule .capsule-image{height:75px;width:75px;border-radius:10px;overflow:hidden;background-color:#f1f1f1}.capsule .capsule-image img{width:100%;height:100%;object-fit:cover}.capsule .capsule-button,.capsule .capsule-name{text-transform:uppercase;font-size:15px}.capsule .capsule-button{background-color:#f0b300;color:#000;padding:5px 25px;border-radius:50px}@media(max-width:768px){.capsule .capsule-image{height:80px;width:80px}.capsule .capsule-button{padding:5px 20px;font-size:14px}}.media{display:flex;padding:20px;background-color:#f0b300;width:100%;color:#000;position:fixed;bottom:20px;z-index:20;gap:20px}.media .media-img{width:150px;height:120px;border-radius:10px;overflow:hidden;background-color:azure}.media .media-img img{width:100%;height:100%;object-fit:cover}.media-details{display:flex;flex-direction:column;gap:20px;width:100%}.media-details .media-name{text-transform:uppercase;font-size:20px;font-weight:900}.media-details .media-controls{display:flex;gap:20px;align-items:center}.media-details .media-controls .play-btn{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px;background-color:#fff}.media-details .media-controls .range-container{display:flex;align-items:center;gap:10px;width:50%}.media-details .media-controls .range-container .custom-range{width:100%;position:relative;height:30px}.media-details .media-controls .range-container .range-track{position:relative;width:100%;height:8px;background-color:#ddd;border-radius:4px;margin:auto;top:50%;transform:translateY(-50%)}.media-details .media-controls .range-container .range-fill{height:100%;background-color:#000;border-radius:4px;width:0}.media-details .media-controls .range-container .range-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;background-color:#000;border-radius:50%;cursor:pointer;left:0;box-shadow:0 0 4px rgba(0,0,0,.2);transition:background-color .2s}.media-details .media-controls .range-container .range-thumb:hover{background-color:#171717}@media(max-width:768px){.media{flex-direction:column;align-items:flex-start;padding:15px;gap:15px;bottom:10px}.media .media-img{width:100%;height:200px}.media-details{gap:15px}.media-details .media-name{font-size:18px}.media-details .media-controls{align-items:flex-start;gap:10px}.media-details .media-controls .range-container{width:80%}}