main {
    margin-bottom: 200px;
}
.music h1 {
    text-align: center;
    font-family: 'DelaGothicOne', sans-serif;
    font-weight: 400;
    font-size: 72px;
    line-height: 72px;
    margin-bottom: 105px;
    position: relative;
    text-transform: uppercase;
}
.music h1 span {
    font-family: 'DelaGothicOne', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 30px;
    color: var(--text-white);
    background: #14E1B0;
    transform: rotate(-2.85deg);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    padding: 5px;
    width: max-content;
    position: absolute;
    right: 470px;
    bottom: -28px;
}
.music .sort {
    display: flex;
    justify-content: center;
    column-gap: 20px;
    margin-bottom: 80px;
}
.music .sort .btn {
    max-width: max-content;
    width: 100%;
    color: var(--main);
    font-size: 14px;
    line-height: 14px;
    padding: 15px;
    letter-spacing: .01em;
    border: 1px solid #e9e9e9;
    white-space: nowrap;
}
.music .sort .btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.music .sort .btn.all {
    max-width: 162px;
    padding: 15px 20px;
}
.music .sort .btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-white);
}
.music .music-grid.show {
    display: grid;
}
.music .music-grid,
.similar .music-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(290px, 430px));
    gap: 80px 20px;
    justify-content: center;
}
.similar .music-grid {
    display: grid;
}
.music .music-grid .music-item,
.similar .music-grid .music-item {
    position: relative;
}
/* music-item.active for listening the music. Changed on pause icon*/
/* .music .music-grid .music-item:hover::before,
.music .music-grid .music-item.active:hover::before,
.similar .music-grid .music-item:hover::before,
.similar .music-grid .music-item.active:hover::before {
    content: '\e914';
    font-family: 'icon';
    font-size: 53px;
    position: absolute;
    top: 188px;
    left: 188px;
    color: var(--text-white);
    z-index: 1;
    cursor: pointer;
} */
/* .music .music-grid .music-item.active:hover::before,
.similar .music-grid .music-item.active:hover::before  {
    content: '\e913';
} */
.music .music-grid .music-item img,
.similar .music-grid .music-item img  {
    max-width: 430px;
    width: 100%;
    max-height: 430px;
    object-fit: cover;
    border-radius: 30px;
    position: relative;
}
.music .music-item img {
    max-width: 500px;
    width: 100%;
    object-fit: cover;
    height: 500px;
    border-radius: 30px;
}
.music .music-item .img,
.music-inner .music-item .img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.music-inner .music-item .img {
    height: max-content;
}
.music .music-item.on .img::before,
.music-inner .music-item.on .img::before {
    content: '\e914';
    font-family: 'icon';
    font-size: 53px;
    position: absolute;
    color: var(--text-white);
    z-index: 1;
    cursor: pointer;
    opacity: 0.5;
}
.music .music-item.on .img:hover,
.music-inner .music-item.on .img:hover {
    cursor: pointer;
}
.music .music-item.on .img:hover::before,
.music-inner .music-item.on .img:hover::before {
    opacity: 1;
}
.music .music-item iframe,
.music-inner .music-item iframe {
    border: unset;
}
.music .music-grid .music-item .song-name,
.similar .music-grid .music-item .song-name {
    margin-bottom: 20px;
}
.music .music-grid .music-item .author,
.similar .music-grid .music-item .author {
    margin: 30px 0 20px;
}
.music .music-grid .music-item .author,
.music .music-grid .music-item .song-name a,
.similar .music-grid .music-item .author,
.similar .music-grid .music-item .song-name a {
    font-family: 'DelaGothicOne', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 20px;
    /* color: var(--black); */
}
.music .music-grid .music-item .song-name a,
.similar .music-grid .music-item .song-name a {
    font-size: 36px;
    line-height: 39px;
    max-width: 360px;
    width: 100%;
    /* max-height: 90px; */
    /* height: 100%; */
    /* overflow: hidden; */
}
.music .music-grid .music-item .date,
.music .music-grid .music-item .compositor,
.music .music-grid .music-item .label,
.music .music-grid .music-item .tracks,
.music-inner .music-item .date,
.music-inner .music-item .compositor,
.music-inner .music-item .label,
.music-inner .music-item .tracks,
.similar .music-grid .music-item .date,
.similar .music-grid .music-item .compositor,
.similar .music-grid .music-item .label,
.similar .music-grid .music-item .tracks {
    font-family: 'RobotoCondensed', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 25px;
}
.music-inner .music-item .content .text {
    font-family: 'delagothicone', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 30px;
}
.music-inner .music-item .content .text .text-title {
    font-family: 'delagothicone', sans-serif;
    font-weight: 400;
    margin-bottom: 30px;
    font-size: 24px;
    line-height: 29px;
}
.music .music-grid .music-item .listen,
.similar .music-grid .music-item .listen {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.music .music-grid .music-item .listen a,
.similar .music-grid .music-item .listen a {
    border: 1px solid #d4d4d4;
    padding: 0 20px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    border-radius: 10px;
}
.music .music-grid .music-item .listen a:hover,
.similar .music-grid .music-item .listen a:hover {
    border-color: var(--accent);
}
/* .music .music-grid .music-item .listen a,
.similar .music-grid .music-item .listen a {
    margin-right: 15px;
} */
.music .music-grid .music-item .listen a::before,
.similar .music-grid .music-item .listen a::before {
    transition: all .3s;
}
.music .music-grid .music-item .listen a:hover::before,
.similar .music-grid .music-item .listen a:hover::before {
    color: var(--accent);
}
.music .music-grid .music-item .listen .apple::before,
.similar .music-grid .music-item .listen .apple::before {
    content: '\e909';
    font-family: 'icon';
    font-size: 13px;
    color: var(--main);
}
.music .music-grid .music-item .listen .spotify::before,
.similar .music-grid .music-item .listen .spotify::before {
    content: '\e90a';
    font-family: 'icon';
    font-size: 21px;
    color: var(--main);
}
.music .music-grid .music-item .listen .more,
.similar .music-grid .music-item .listen .more {
    padding: 20px;
    transition: all .3s;
    border: 1px solid #d4d4d4;
}
.music .music-grid .music-item .listen .more:hover,
.similar .music-grid .music-item .listen .more:hover {
    background: var(--accent);
}
.music .music-grid .music-item .listen .more:hover span,
.music .music-grid .music-item .listen .more:hover span::before,
.music .music-grid .music-item .listen .more:hover span::after,
.similar .music-grid .music-item .listen .more:hover span,
.similar .music-grid .music-item .listen .more:hover span::before,
.similar .music-grid .music-item .listen .more:hover span::after {
    background: var(--text-white);
}
.music .music-grid .music-item .listen .more span,
.similar .music-grid .music-item .listen .more span {
    width: 4px;
    height: 4px;
    display: block;
    border-radius: 100%;
    background: var(--main);
    position: relative;
}
.music .music-grid .music-item .listen .more span::before,
.music .music-grid .music-item .listen .more span::after,
.similar .music-grid .music-item .listen .more span::before,
.similar .music-grid .music-item .listen .more span::after  {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: var(--main);
    border-radius: 100%;
    position: absolute;
    left: -7px;
}
.music .music-grid .music-item .listen .more span::after,
.similar .music-grid .music-item .listen .more span::after {
    left: unset;
    right: -7px;
}
.music .music-grid .music-item .window-background,
.similar .music-grid .music-item .window-background  {
    background: rgba(0, 0, 0, 0.2);
}
.music .music-grid .music-item .window-background .window-body,
.similar .music-grid .music-item .window-background .window-body {
    padding: 60px;
    max-width: 500px;
    border-radius: 30px;
    display: block;
    background: var(--bg-white);
    border: 1px solid var(--text-white);
}
.music .music-grid .music-item .window-background .window-body .window-content,
.similar .music-grid .music-item .window-background .window-body .window-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.music .music-grid .music-item .window-background .window-body .window-content img,
.similar .music-grid .music-item .window-background .window-body .window-content img {
    max-width: 140px;
    width: 100%;
    height: 140px;
    object-fit: cover;
    margin-bottom: 30px;
}
.music .music-grid .music-item .window-background .window-body .window-content .author,
.similar .music-grid .music-item .window-background .window-body .window-content .author {
    margin-bottom: 10px;
}
.music .music-grid .music-item .window-background .window-body .window-content .songs,
.similar .music-grid .music-item .window-background .window-body .window-content .songs {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}
.music .music-grid .music-item .window-background .window-body .window-content .songs span,
.similar .music-grid .music-item .window-background .window-body .window-content .songs span {
    font-family: 'RobotoCondensed', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #8d8d8d;
}
.music .music-grid .music-item .window-background .window-body .window-content .songs span:not(:last-child),
.similar .music-grid .music-item .window-background .window-body .window-content .songs span:not(:last-child) {
    margin-bottom: 25px;
}
.music .music-grid .music-item .window-background .window-body .window-content .divider,
.similar .music-grid .music-item .window-background .window-body .window-content .divider {
    height: 1px;
    background: #e9e9e9;
    width: 100%;
    margin-bottom: 20px;
}
.music .music-grid .music-item .window-background .window-body .window-content .platform,
.similar .music-grid .music-item .window-background .window-body .window-content .platform {
    font-family: 'RobotoCondensed', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    color: #8d8d8d;
    margin-bottom: 20px;
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid,
.music-inner .music-item .content .platform-grid,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    justify-content: center;
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid .item,
.music-inner .music-item .content .platform-grid .item,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid .item {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d4d4d4;
    padding: 15px 20px;
    border-radius: 10px;
    transition: all .3s;
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid .item:hover,
.music-inner .music-item .content .platform-grid .item:hover,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid .item:hover {
    border-color: var(--accent);
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid .item::before,
.music-inner .music-item .content .platform-grid .item::before,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid .item::before {
    font-family: 'icon';
    color: var(--main);
    transition: all .3s;
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid .item:hover::before,
.music-inner .music-item .content .platform-grid .item:hover::before,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid .item:hover::before {
    color: var(--accent);
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid .apple::before,
.music-inner .music-item .content .platform-grid .apple::before,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid .apple::before {
    content: '\e909';
    font-size: 13px;
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid .spotify::before,
.music-inner .music-item .content .platform-grid .spotify::before,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid .spotify::before {
    content: '\e90a';
    font-size: 21px;
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid .yandex::before,
.music-inner .music-item .content .platform-grid .yandex::before,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid .yandex::before {
    content: '\e908';
    font-size: 15px;
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid .boom::before,
.music-inner .music-item .content .platform-grid .boom::before,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid .boom::before {
    content: '\e919';
    font-size: 19px;
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid .youtube::before,
.music-inner .music-item .content .platform-grid .youtube::before,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid .youtube::before {
    content: '\e916';
    font-size: 13px;
}
.music .music-grid .music-item .window-background .window-body .window-content .platform-grid .vk::before,
.music-inner .music-item .content .platform-grid .vk::before,
.similar .music-grid .music-item .window-background .window-body .window-content .platform-grid .vk::before {
    content: '\e915';
    font-size: 16px;
}
.music .music-grid .music-item .window-background .window-body .close::before,
.similar .music-grid .music-item .window-background .window-body .close::before {
    top: 35px;
    right: 35px;
}
.music-inner .music-item {
    display: flex;
    column-gap: 100px;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 140px;
    margin-bottom: 140px;
    flex-wrap: wrap;
}
.music-inner .music-item img {
    max-width: 500px;
    width: 100%;
    object-fit: cover;
    height: 500px;
    border-radius: 30px;
    margin-bottom: 20px;
}
.music-inner .music-item .content {
    width: 100%;
    max-width: 710px;
}
.music-inner .music-item .content .author {
    font-family: 'DelaGothicOne', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 20px;
}
.music-inner .music-item .content .song-name {
    font-family: 'DelaGothicOne', sans-serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 52px;
    margin-bottom: 20px;
}
.music-inner .music-item .date,
.music-inner .music-item .compositor,
.music-inner .music-item .label,
.music-inner .music-item .tracks {
    font-size: 16px;
    line-height: 39px;
}
.music-inner .music-item .content .platform-grid {
    margin-top: 40px;
    grid-template-columns: repeat(3, .1fr);
    justify-content: flex-start;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 55px;
    margin-bottom: 40px;
}
.music .to-home {
    max-width: max-content;
    padding: 15px 20px;
    color: var(--main);
    font-size: 12px;
    line-height: 12px;
    display: none;
    margin: 0 auto;
}
.similar .all-albums {
    display: none;
    font-family: 'delagothicone';
    font-size: 12px;
    line-height: 12px;
    max-width: 140px;
    color: var(--main);
    white-space: nowrap;
    padding: 15px 20px;
    margin: 90px auto 0;
}
.similar .all-albums:hover {
    background: var(--black);
    color: var(--text-white);
}

@media screen and (max-width: 785px) {
    .music h1,
    .music h1 span {
        font-size: 28px;
        line-height: 31px;
        margin-bottom: 70px;
    }
    .music h1 span {
        margin-bottom: 0;
        right: 50%;
        transform: translate(50%, -50%) rotate(-2.85deg);
        bottom: -55px;
    }
    .music .sort {
        margin-bottom: 30px;
        column-gap: 10px;
    }
    .music .sort .btn {
        font-size: 12px;
        line-height: 12px;
        letter-spacing: .01em;
        padding: 15px 20px;
    }
    .music .music-grid {
        margin-bottom: 40px;
    }
    .music .music-grid {
    /* .similar .music-grid { */
        gap: 30px 10px;
    }
    .music-inner .music-item {
        padding-bottom: 40px;
        margin-bottom: 30px;
    }
    .music-inner .music-item img,
    .similar .music-item img {
        margin-bottom: 20px;
    }
    .music .music-grid .music-item .author,
    .music-inner .music-item .content .author,
    .music .music-grid .music-item .window-background .window-body .window-content .author,
    .similar .music-item .author {
        font-size: 12px;
        line-height: 14px;
        margin-bottom: 10px;
    }
    .music .music-grid .music-item > a {
        display: flex;
    }
    .music .music-grid .music-item .song-name,
    .music-inner .music-item .content .song-name ,
    .similar .music-item .song-name{
        font-size: 24px;
        line-height: 26px;
        margin-bottom: 10px;
    }
    .music .music-grid .music-item .compositor,
    .music .music-grid .music-item .label,
    .music .music-grid .music-item .tracks,
    .similar .music-item .compositor,
    .similar .music-item .label,
    .similar .music-item .tracks {
        display: none;
    }
    .music .music-grid .music-item .date,
    .similar .music-item .date {
        font-size: 12px;
        line-height: 21px;
    }
    .music .music-grid .music-item .listen,
    .similar .music-grid .music-item .listen {
        margin-top: 20px;
    }
    .music .music-grid .music-item .listen a,
    .similar .music-grid .music-item .listen a {
        padding: 10px 15px;
    }
    .music-inner .music-item .date,
    .music-inner .music-item .compositor,
    .music-inner .music-item .label,
    .music-inner .music-item .tracks {
        font-size: 12px;
        line-height: 21px;
    }
    .music-inner .music-item .content .platform-grid {
        margin-top: 20px;
    }
    .music-inner .music-item .content .platform-grid .item {
        padding: 10px 15px;
    }
    .music .to-home {
        display: flex;
    }
    .similar .all-albums {
        display: flex;
    }
}
@media screen and (max-width: 595px) {
    .music .music-grid .music-item .window-background .window-body .window-content .platform-grid,
    .similar .music-grid .music-item .window-background .window-body .window-content .platform-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .music-inner .music-item .content .platform-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}