.flex-recordings {
    gap: 2rem;
    align-items: flex-start;
    justify-content: space-between;
}

.container-recordings-left {
    width: 100%;
    max-width: 750px;
}

.container-recordings-right {
    /* background: var(--light-beige); */
    flex: 1;
    height: 100%;
    padding: 1rem;
    position: sticky;
    top: 1rem;
    width: 100%;
    max-width: 400px;
    border: 10px solid var(--light-beige)
}

.albums-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.album {
    padding-bottom: 5rem;
    border-bottom: 10px solid var(--light-beige);
}

.album + .album {
    margin-top: 5rem;

}

.recordings-wrapper {
    margin-bottom: 10rem;
    max-width: 850px;
    display: none;
}

.recordings-wrapper.active {
    display: block;
}

.recordings-wrapper h2 {
    font-size: 24px;
    margin-bottom: 4rem;
}

.recordings-wrapper h3 {
    font-size: 20px;
}

.albums-cover img {
    width: 100%;
    max-width: 200px;
}

p.recordings-second--title {
    font-style: italic;
    font-size: 0.8em;
    font-weight: 600;
    margin-bottom: 2rem;
}

p.recordings-purchase a {
    font-family: var(--font-title);
    font-weight: 800;
}

ul.filter-recordings li {
    cursor: pointer;
    border-bottom: 1px solid var(--light-beige);
    padding: 1rem;
    background: white;
    text-transform: capitalize;
}

ul.filter-recordings li:last-child {
    border: 0;
}

ul.filter-recordings li:hover {
    background: var(--light-beige);
}

ul.filter-recordings li.active {
    pointer-events: none;
    /* font-style: italic; */
    font-weight: 600;
    /* background: var(--color-gold); */
    /* color: white; */
}

ul.filter-recordings li.active::before {
    content: '>';
    margin-left: 0.5rem;
}

@media(max-width:1070px) {

    .flex-recordings {
        flex-direction: column-reverse;
    }

    .container-recordings-right {
        max-width: none;
        top: 0;
        background: white;
        padding: 0.5rem;
    }

    .filter-recordings {
        display: flex;
        justify-content: space-between;
    }

    ul.filter-recordings li {
        border: 0;
        font-size: 0.85rem;
        padding: 0.5rem;
    }
}

@media(max-width:870px) {

    .albums-wrapper {
        flex-direction: column-reverse;
    }
}

@media(max-width:585px) {

    .flex-recordings {
        flex-direction: column-reverse;
    }

    .container-recordings-right {
        position: static;
    }

    .filter-recordings {
        display: block;
    }

    ul.filter-recordings li {
        border: 0;
        font-size: 0.85rem;
        padding: 0.5rem;
    }
}

@media(min-width:870px) {
    .albums-info {
        max-width: 500px;
    }
}