.collection {
    position: fixed;
    left: 0;
    bottom: 25px;
    width: 100%;
}

.collection__list {
    align-items: center;
    background: #FFF;
    border-radius: 15px;
    border: 2px solid #041C2C;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    height: 76px;
    justify-content: space-evenly;
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
    max-width: 350px;
}

.prev-button,
.next-button {
    display: flex;
    width: 50px;
    height: 72px;
    padding: 23.5px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.prev-button {
    opacity: 0.3;
    background: linear-gradient(270deg, #FFF 0%, rgba(0, 0, 0, 0.00) 100%);
}

.next-button {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, rgba(255, 255, 255, 0.80) 100%);
    backdrop-filter: blur(1.5px);   
}

.collection__item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 42px;
    background: rgba(217, 217, 217, 0.60);
    mix-blend-mode: multiply;
    width: 51px;
    height: 61px;
    flex-shrink: 0;
}

.collection__item.active[data-target="object1"] {
    background-color: rgb(255, 187, 0);
}

.collection__item.active[data-target="object2"] {
    background-color: rgb(174, 227, 241, 0.5);
}

.collection__item.active[data-target="object3"] {
    background-color: #838e0ece;
}

.collection__item.active[data-target="object4"] {
    background-color: rgba(247, 74, 16, 0.8);
}