@font-face {
  font-family: "Segoe";
  src: url("https://veosuno.ru/fonts/Segoe UI.ttf") format("truetype");

}

@font-face {
  font-family: "OpenSansSemiBold";
  src: url("https://veosuno.ru/fonts/OpenSans-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "OpenSansRegular";
  src: url("https://veosuno.ru/fonts/OpenSans-Regular.ttf") format("truetype");
}


html,
body {
  overflow-x: hidden;
  background: #101012;
  display: flex;
  justify-content: start;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  min-width: fit-content;
  font-family: "OpenSansRegular";
  color: #4D4D4D;
  background-attachment: fixed;
  position: relative;
}

textarea {
  scrollbar-width: thin;
  scrollbar-color: #DE642B #E54270;

  text-align: left;
}

.bbt {
  /* Auto layout */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 199px;
  height: 45px;
  justify-content: center;
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
     /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
  ;
  border-radius: 32px;

  /* Inside auto layout */
  flex: none;
  order: 1;
  flex-grow: 0;

}

.red {
  border: 1px solid #e45226 !important;
}

.error {
  font-size: 13px;
  color: #e45226;
}

.nicnameshow {
  display: block !important;
}

.dropdown-menu button:hover {
  background: #444;
}

.dropdown-menu button {
  border-radius: revert;
}

.dropdown-menu a svg {
  margin-right: 5px;
}

.dropdown-menu hr {
  border-color: #C9C9CB;
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  color: #C9C9CB;
  margin-bottom: 5px;
}

.dropdown-menu {
  position: absolute;
  top: 20px;
  right: 10px;
  background: #333335;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  flex-direction: column;
  min-width: 120px;
  z-index: 10000;
  display: none;
  border-radius: 24px;
  padding: 10px;
  min-width: 250px;
}


.recreatesong,
.recreatesongindex {
  /* Button S */
  background: none;
  box-sizing: border-box;

  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;

  width: 135px;
  height: 35px;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 32px;

  /* Inside auto layout */
  flex: none;
  order: 1;
  flex-grow: 0;

}

.center {
  flex-grow: 1;
  padding: 10px;
}

.content {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}

.fisrstblock {
  padding: 10px;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  flex-direction: column;
}

.leftside_top {
  display: flex;
}

.leftside {
  display: flex;
  width: 200px;
  border-right: 1px solid #333335;
  flex-direction: column;
}

.leftside_top {
  padding: 24px;
  padding-top: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #101012;
}

.logo svg {
  width: 96px;
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
  color: rgb(247, 244, 239);
  height: 23px;

}

.avatar .img {
  width: 25px;
  border-radius: 45px;
}

.inn {
  width: 69px;
  height: 32px;
  font-family: 'Segoe UI';
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: #FFFFFF;
  padding-bottom: 20px;

}

.avatar {
  display: flex;
  flex-direction: row;
  padding-top: 27px;
  cursor: pointer;
  align-items: center;
  justify-content: flex-start;
}

.white:hover,
.menu_item:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}

.menu_item {
  cursor: pointer;
  display: flex;
  align-items: normal;
  padding-bottom: 20px;
  color: #6a6a72;
}

.leftmenu,
.leftsubmenu {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #6a6a72;
}

.menu_item_sel {
  color: rgb(255, 255, 255);
}

.white {
  color: rgb(194, 194, 193);
  font-size: 14px;
}

.mainmenu,
.submainmenu {
  padding-left: 27px;
  padding-top: 30px;
}

.bott_t {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  align-items: center;
}

.uppball a {
  color: white !important;
}

.uppball {
  margin: 20px;
  background-image: linear-gradient(138.36deg, rgba(16, 16, 18, 0) 0%, rgb(16, 16, 18) 76.47%),
     url('https://veosuno.ru/img/image29.png');
  border-radius: 31px;
  width: 150px;
  height: 170px;
  background-position: 50%;
  background-size: cover;
  color: white !important;

}

.uppball_h {
  font-size: 14px;
  margin-left: 16px;
  margin-top: 10px;
}

.uppball .uppball_t {
  font-size: 12px;
  margin-left: 16px;
  color: rgb(194, 194, 193);
  padding-top: 10px;
}

.bbt a {
  color: white !important;
}

.innbtn {
  /* Button mini */

  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 37px;
  color: #fff;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 32px;
  cursor: pointer;

}

.uppball_p {
  border-radius: 12px;

  border-radius: 32px;
  line-height: 24px;
  padding-bottom: 8px;
  text-align: center;
  margin: 12px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
}

.social {
  height: 55px !important;
  border-top: 1px solid #333335;
  width: 100%;
}

.form_center .pref {
  border-radius: 12px;
  background-color: rgb(16, 16, 18);
  padding: 8px;
  display: flex;
  align-items: center;
  align-content: initial;
  border: 1px solid #49494A;
  font-size: 14px
}

.slider .sel {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2px;
  gap: 8px;
  height: 28px;
  color: white;
  background: #333335;
  border-radius: 24px;
  flex: none;
  order: 0;
  flex-grow: 0;

}

.slider {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 190px;
  height: 34px;
  background: #101012;
  border: 1px solid #49494A;
  border-radius: 24px;
  color: white;

}

.form_center .pref-type {
  border-radius: 12px;
  background-color: #101012;
  border: 1px solid #49494A;
  display: flex;
  align-items: center;
  align-content: initial;
  width: 180px;
  justify-content: space-between;
  font-size: 14px;
  padding: 3px;
}

.form_center {
  padding: 10px;
  max-width: 450px;
  min-width: 360px;
  border-right: 1px solid #333335;
  display: flex;
  flex-direction: column;
  overflow-y: none;
}

.form_center-top_block {
  border-bottom: 1px solid #333335;
  padding-bottom: 10px;

  display: flex;
  justify-content: space-between;
}

.pref {
  color: white;
}

.pref-type div {
  padding: 10px;
  color: white;
  cursor: pointer;
}

.selpref {
  border-radius: 9px;
  background-color: #333335;
}


.graybtn:hover,
.graybtn:hover .selectbtbn {
  background-color: #54545c !important;
  border: 1px solid #5c5c61
}

.graybtn svg {
  margin-top: 2px;
}

.remixbtn {
  background-color: #333335 !important;
}

.graybtn {
  border-radius: 15px;
  background-color: #252529;
  font-size: 14px;
  color: white;
  padding: 7px;
  display: flex;
  text-wrap: nowrap;
  margin: 3px;
  border: 1px solid #2c2c2f;
  cursor: pointer;
  min-width: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item .graybtn {
  margin-right: 36px;
  display: none;
}

.graybtnsmal:hover {

  background-color: 1px solid #2c2c2f;
}

.graybtnsmal {
  border-radius: 15px;
  background-color: #252529;
  font-size: 13px;
  color: white;
  padding: 3px;
  display: flex;
  text-wrap: nowrap;
  margin: 3px;
  border: none;
  cursor: pointer;
  margin-bottom: 10px;
  justify-content: center;
}

.form_block {
  background-color: #1F1F21;
  border: 1px solid #1F1F21;
  margin-top: 16px;
  border-radius: 24px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
}

#fileInput {
  display: none;
}

.form_block .title {
  color: white;
  color: white;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.form_block_input {
  color: white;
  border: none;
  outline: none;
  font-size: 14px;
  width: 100%;
  background-color: #1F1F21;
  color: #969698;
}

select {
  outline: none;
}

.form_input {
  color: white;
  border: none;
  outline: none;
  font-size: 14px;
  width: 100%;
  background-color: #4D4D4D;
  color: #969698;
  border-radius: 12px;
  border: 1px solid #4D4D4D;
  padding: 5px;
  margin: 5px;
}

.form_block_row_smallbtn {
  padding: 8px;
  width: 32px;
  height: 32px;
  background: #333335;
  border-radius: 100px;
  display: flex;
  align-items: center;
}

.red {
  color: red;
}

.stext {
  min-height: 150px;
  margin-top: 10px;
}

.overflowy {
  overflow-y: auto;
}

.form_block_row {
  display: flex;
  justify-content: space-around;

}

.form_block_row_blank {
  display: flex;
  justify-content: space-around;

}

hr {
  border: 1px solid;
  border-top: 0px;
  margin-bottom: 20px;
  margin-top: 10px;
  width: 100%;
}

.stext {
  outline: none;
}

.createbtn,
.createbtnvideo,
.createphoto {
  background-image: url("https://veosuno.ru/img/aura_horizontal.jpg");
  background-position-x: 50%;
  background-position-y: 50%;
  background-size: cover;

  flex-direction: row;
  justify-content: space-between;
  font-size: 16px
}

.form_block_row_blank .graybtn {
  background-color: #101012 !important
}

.cetnter_title {
  margin-left: 5px;
  margin-bottom: 30px;
  margin-top: 10px;
  color: white;
  font-size: 20px;
}

.coverimage {
  min-width: 60px;
  min-height: 80px;
  width: 60px;
  height: 80px;
  background-size: cover;
  margin-right: 5px;
  border-radius: 5px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: url("https://veosuno.ru/img/logo.png");
}

.songtitle span {
  color: white;
}

.imagetimer {
  position: absolute;
  bottom: 2px;
  background-color: oklab(0.173941 0.00112605 -0.00393561 / 0.7);
  border-radius: 4px;
  padding: 2px;
  font-size: 11px;
  right: 5px;
  color: white;
}

.items {
  margin-top: 30px;
  margin-left: 30px;
  margin-bottom: 200px;
}

.item:hover .coverimage .playhover,
.item:hover .songnameedit {
  visibility: visible;
}

.item:hover .coverimage {
  color: white;
}

.songtitle .modelname {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 19px;
  background: #333335;
  border-radius: 24px;
  flex: none;
  flex-grow: 0;
  flex-grow: 0;
  margin-left: 24px;
  font-size: 10px;
  color: white;
  padding-left: 3px;
  padding-right: 3px;
  flex-wrap: nowrap;
}

.songnameedit {
  visibility: hidden;
  margin-left: 5px;
}

.item:hover .remixbtn {
  display: flex;
}

.item:hover {
  background-color: #1F1F21;
  border-radius: 12px;
}


.item {
  display: flex;
  border-radius: 12px;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
  padding: 10px;
}

.itemvideo,
.itemphoto {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  margin: 10px;
}

.figurecenter span {
  text-align: center;
  font-size: 11px;
  color: red;
}

.figurecenter {
  display: flex;
  align-items: center;
  justify-content: unsafe;
  width: 100%;
  justify-content: center;
  color: white;
}

.itemphoto img {
  max-width: 200px;
}

a {

  text-decoration: none;
}

a {
  color: white;
  text-decoration: none;
}

.player_nav {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1
}

a:hover {
  text-decoration: underline;
}

.songtitle {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  position: relative;
  align-items: baseline;
}

.dropdown-menu.show {
  display: flex;
}

.songtitle small {
  flex-grow: 1;
  margin-left: 16px;
  font-size: 10px;
  color: white;
}

.titlename {
  background: none;
  border: none;
  outline: none;
}

.songtitle a,
.titlename {
  font-size: 18px;
  font-family: "OpenSansSemiBold";
  color: white;
}

.songstyle {
  font-size: 12px;
  color: white;
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
}

.songicons {
  display: flex;
  padding-right: 10px;
}

.titlegroup {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  padding-left: 16px;
}

.flex_row {
  display: flex;
  flex-direction: row;
  margin: 10px;
}

.flex_col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form {
  justify-content: center;
  max-width: 400px;
  margin-left: 20px;
  margin-top: 20px;
}

div,
button,
a {
  -webkit-tap-highlight-color: transparent;
  /* Убирает подсветку */
}

.likedmusicbutton {
  font-size: 20px;
}

.musicbar {
  margin-left: 30px;
  margin-top: 22px;
  padding-right: 10px;
  display: flex;
  align-items: center
}

.searchmusic {
  flex-grow: 1;
  margin-left: 10px;
  border-radius: 15px;
  border: 1px solid;
  display: flex;
  align-items: center;
  padding-left: 10px;
  background-color: #1F1F21;
  padding-right: 19px;
  height: 28px;
}

.findmusic:focus,
.findmusic:active {
  border: none;
}

.findmusic {
  margin-left: 10px;
  background-color: #1F1F21;
  border: none;
  height: 95%;
  flex-grow: 1;
  outline: none;
  color: white;
}

.hide {
  display: none !important;
}

#repeat,
#shrink {
  padding: 5px !important;
}

.shrinksel {
  color: white;
  background-color: #e46120;
}

.repeatsel {
  color: white;
  background-color: #e46120;
}

.repeatsel {
  color: white;
}

.form .button {
  border-radius: 12px;
  background-color: #4D4D4D;
  padding: 5px;
  display: flex;
  margin: 5px;
  -moz-box-align: center;
  align-items: center;
  -moz-box-pack: center;
  justify-content: center;
  border: 1px solid #424242;
  color: white;
  cursor: pointer;
  min-width: 50px
}

.shake {
  margin-left: 2px !important;

}

.buttonyandex {
  font-size: 12px;
  background: red;
  display: flex;
  align-content: flex-end;
  border-radius: 12px;
  max-width: 150px;
  align-items: center;
  margin-bottom: 10px;
  padding: 0px 8px;
  font-size: 11px;
}

.topform {
  position: fixed;
  z-index: 25000;
  left: 0px;
  top: 0px;
  display: flex;
  background-color: rgba(16, 15, 15, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form_block2 {
  background-color: #101012;
  padding: 0px;
  margin-right: 20px;
}

.topform .form_block {
  background-color: #1F1F21;
  padding: 10px;
}

.topform2 {
  z-index: 20002;
  border-radius: 24px;
  background-color: #1F1F21 !important;
  padding: 20px !important;
}

.player {
  background: #222;
  padding: 20px;
  border-radius: 10px;
  width: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.controls {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}

button {
  background: none;
  color: white;
  border: none;
  margin: 5px;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}


.progress-container {
  width: 100%;
  height: 10px;
  background: #444;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.progress-filled {
  height: 100%;
  background: #e45226;
  width: 0%;
  border-radius: 3px;
}

.musicplay {
  background-color: #333;
}

.nomp3 .progress {
  background-image: url("https://veosuno.ru/img/aura_horizontal.jpg");
  width: 100%;
  background-size: cover;
  white-space: nowrap;
  height: 100%;
  align-content: center;
  color: white;
  font-size: 12px;
}

.progressparent .progress {
  background-image: url("https://veosuno.ru/img/aura_horizontal.jpg");
  width: 100%;
  background-size: cover;
  white-space: nowrap;
  height: 8px;
  align-content: center;
  color: white;
  font-size: 12px;
  background: radial-gradient(133.33% 1036.06% at -15.52% 84.62%, #7516FF 2.96%, #BE21FF 32.69%, #FF5245 55.65%, #FF5245 80.13%, #FF6D2B 100%)
     /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
  ;
}

.nomp3 {
  background-color: #333;
  height: 30px;
  display: flex;
  justify-content: flex-start;
}

.sunoerror {
  padding: 20px;
}

.musicabout img {
  border-radius: 12px;
}

.musicabout {
  color: white;
  font-size: 12px;
  padding: 10px;
}

.vocalGendersel,
.musiconlysel,
.aspectsel,
.btnselorange {
  background-color: #e45226 !important;
  border: 1px solid #e45226;
}

.contentover {
  position: relative;
  width: 100%;
}

.musicplayer {
  opacity: 0.95;
  display: flex;
  position: fixed;
  z-index: 2000;
  bottom: 20px;
  min-height: 90px;
  background-color: #101012;
  border: 1px solid #868686;
  border-radius: 5px;
  margin-left: 6px;
  align-items: center;
  flex-direction: column;
}

.randprompt {
  cursor: pointer;
}

.playerimage {
  min-width: 60px;
  min-height: 80px;
  width: 60px;
  height: 80px;
  background-size: cover;
  margin-right: 5px;
  border-radius: 5px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 5px;

}

.playertitlename {
  color: white;
  font-size: 16px;
  margin-left: 10px;
}

.VkIdSdk_oauth_link_text {
  font-size: 11px !important;
}

.VkIdSdk_oauth_item {
  padding: 0px;
}

.playertitletags {
  margin-left: 10px;
  color: white;
  font-size: 12px;
  max-width: 200px;
  overflow: hidden;
  max-height: 17px;
}

.musicplayer_row {
  width: 100%;
  display: flex;
  align-items: center;
}

.smbutton {
  display: flex;
}

.controls {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.videoframe {
  display: flex;
  flex-wrap: wrap;
}

.mobilemenu {
  display: none;
}

.nicname {
  display: flex;
  padding-left: 27px;
  padding-top: 30px;
  flex-direction: column;
}

.playanimation {
  display: none;
}

.coverimage .pause,
.coverimage .play {
  display: none;
}

.coverimage:hover .play {
  display: block;
}

.playtrack:hover .pause {
  display: block;
}

.playtrack:hover .play,
.playtrack:hover .playanimation {
  display: none !important;
}

.playtrack .playanimation {
  display: block;
}

.playanimation {
  color: white;
}

.loaderseparate {
  display: flex;
  flex-direction: column;
  align-items: anchor-center;
  margin: 24px;
}

.audio-player {
  width: 100%;
  background-color: #1F1F21;
  border-radius: 6px;
}

/* Панель управления (WebKit-браузеры) */
.audio-player::-webkit-media-controls-panel {
  background-color: #1F1F21;
}

.musictext {
  display: flex;
  flex-direction: column;
  padding: 20px;
  min-width: 300px;
}

.music_aboutprompt {
  font-size: 16px;
  color: #C9C9CB;
  margin-top: 30px;
  margin-bottom: 30px;
}

.music_abouttitle {
  font-size: 18px;
  margin-bottom: 10px;
}

.musicpromtptexttitle a:hover {
  color: #427BE5
}

.musicpromtptexttitle a {
  color: #427BE5;
}

.liriktext {
  margin: 10px;
}

.parentclose:hover {

  background: #1F1F21;
}

.banner {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 1)), url("https://veosuno.ru/img/header_gallery1.png");
  background-color: #1F1F21;
  padding: 30px;
  min-height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 24px;
}

.banner {
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 330px;
}

.gallery_1 {
  background-image: linear-gradient(to right,
        rgba(0, 0, 0, 1),
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.05),
        rgba(0, 0, 0, 1)),
     url("http://veosuno.ruhttps://veosuno.ru/img/ban1.png");
}

.gallery_2 {
  background-image: linear-gradient(to right,
        rgba(0, 0, 0, 1),
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.05),
        rgba(0, 0, 0, 1)),
     url("img/header_gallery2.png");
}

.gallery_3 {
  background-image: linear-gradient(to right,
        rgba(0, 0, 0, 1),
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.05),
        rgba(0, 0, 0, 1)),
     url("img/header_gallery3.png");
}

.firsttoptitle {
  height: 100px;
}

.first_block {
  display: flex;
  justify-content: space-around;
  padding-top: 15px;
}

.f_block_title button {
  background: #8f2d8e;
  padding: 5px;
  height: 27px;
}

.f_block_title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.first_rows {
  display: flex;
  flex-wrap: wrap;
}

.f_block_title h2 {
  color: white;
  font-size: 20px;
  padding-bottom: 10px;
  flex-grow: 1;
}

.f_blockimage_coll {
  gap: 10px;
  /* Опционально: добавляем отступ между элементами */
  column-count: 4;
}

.itemphoto_first img {
  border-radius: 24px;
}

.itemphoto_first video {
  border-radius: 24px;
  width: 100%;
}

.itemphoto_first {
  position: relative;
  padding: 0px;
  margin: 0px;
  display: flex;
  overflow: hidden;
  min-height: 120px;
  margin: 5px;
}

.itemphoto_first .progressparent {
  background-color: #333;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  position: absolute;
  bottom: -21px;
  width: 100%;
}

.soundtag {
  color: #C9C9CB;
  font-size: 12px;
}

figcaption span {

  position: absolute;
  left: 10px;
  top: 10px;
  color: white;
}

figcaption {
  display: none;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  cursor: pointer;
  background-color: rgba(0, 0, 0, .6);
}

.figurebuttons a:hover {}

.figurebuttons {
  display: flex;
  justify-content: space-evenly;
  align-items: baseline;
  height: 100%;
  padding: 10px;
  flex-direction: column;
}

.figurebuttons a {
  color: #ffffff;
  border-radius: 16px;
  background: none;
  margin-bottom: 10px;
}

.recreateimagevideo {
  position: absolute;
  bottom: 20px;
  background: white;
  color: #444;
  right: 20px;
}

figure:hover figcaption {
  display: block;
}

.f_block_coll {
  flex: 1;
  margin: 5px;
  padding: 5px;
}

.f_block_coll:hover {
  background: #222;
}

.itemphoto_first img {
  width: 100%;
}

.b_title {
  font-size: 36px;
  color: white;
  margin-bottom: 6px;
  max-width: 400px;
  padding-top: 70px;
}

.b_content {
  font-size: 16px;
  color: white;
  margin-bottom: 20px;
  max-width: 400px;
}

.clearimage {
  padding: 0px !important;
}

.rightside {
  position: relative;
  border-left: 1px solid #333335;
  overflow-y: auto;
  max-width: 457px;
  min-width: 350px;
}

#volumeSlider {
  accent-color: #333333;
}

.volume-control {
  padding: 18px;
  display: flex;
  align-items: center;
}

.b_button {
  background-color: white;
  color: black;
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding: 10px;
  width: 130px;
}

.parentclose {
  position: absolute;
  right: 10px;
  background: #101012;
  border: 1px solid #737375;
  border-radius: 18px;
}

.removeimg {
  position: relative;
  margin: 10px;
}

.removeimg span {
  position: absolute;
  right: 3px;
  top: 3px;
  color: red;
  cursor: pointer;
}

.imagesbananas img {
  width: 120px;
  border-radius: 8px;
}

.imagesbananas {
  display: flex;
}

.imagebanana {
  width: 200px;
}

.pref select,
.form_block_row select,
.form_block select {
  background: #101012;
  border: none;
  color: white;
}

select {
  font-size: 14px;
  /* Example: set to 16 pixels */
}

/* To set the font size of the options within the select element */
select option {
  font-size: 14px;
  /* Example: set to 14 pixels */
}

.form_block textarea {
  max-width: 400px !important;
}

.closehint {
  color: red;
  cursor: pointer;
}

.playertitletime {
  color: white;
  margin: 10px;
}

.nextfs3,
.nextfs2,
.nextfs1 {
  display: none;
}

.selectedliked,
.selbtn svg {
  background-color: #7a28ba;
  border-radius: 16px
}

.selectedbasket,
.selbtn svg {
  background-color: #7a28ba;
  border-radius: 16px
}

@media screen and (max-width: 950px) {
  .f_blockimage_coll {
     gap: 10px;
     /* Опционально: добавляем отступ между элементами */
     column-count: 2;
  }
}

@media screen and (max-width: 1024px) {

  html,
  body {
     overflow-x: visible;
  }

  .rightside {
     border: 1px solid #1F1F21;
     border-radius: 24px;
     background: #151517;
     position: fixed;
     margin: 0px !important;
     left: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
     z-index: 30000;
  }

  .b_title {
     font-size: 24px;
     text-align: center;
     padding-top: 115px
  }

  .logo.desktop {
     display: none;
  }

  .b_content {
     font-size: 16px;
     text-align: center;
     margin-top: 84px;
  }

  figcaption {
     display: flex;
     background: none;
  }

  .items {
     margin-left: 1px;
     max-width: 429px;

  }

  .f_blockimage_coll {
     gap: 0px;
     column-count: 1;
  }

  .item button {
     font-size: 22px
  }

  .balancepc {
     display: none;
  }

  .uppball {
     width: 100%;
  }

  .uppball_p {
     box-sizing: border-box;
     color: white;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     padding: 6px 16px 8px;
     gap: 8px;
     width: 70% !important;
     height: 45px;
     background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 32px;
     cursor: pointer;
  }

  .songnameedit {
     display: none !important;
  }

  .balancediv {
     padding-top: 30px;
  }

  .form_block_row .promo,
  .form_block_row .paybtn {
     width: 300px !important;
  }

  .nextfs3,
  .nextfs2,
  .nextfs1 {
     display: block;
  }

  .f_blockimage_coll {
     grid-template-columns: repeat(2, 1fr);

  }

  .songtitle .modelname {
     display: none;
  }

  .remixbtn {
     font-size: 12px;
     visibility: hidden !important;
     display: none !important;
  }

  .songstyle {
     font-size: 11px;
  }

  .songtitle small {
     display: none;
  }

  .songtitle a {
     font-size: 14px;
  }

  .fs2,
  .fs3 {
     display: none;
  }

  .volume-control {
     display: none;
  }

  .playertitletime {
     display: none;
  }

  .videoclipwindow .modal-body {
     flex-direction: column;

  }

  .videoclipwindow .modalclose {
     right: 33px;
  }

  .videoclipwindow .videoclipwindow_modalwindow_video_block {
     width: 100% !important;
  }

  .videoclipwindow .modal-info {
     padding: 20px;
     width: 100% !important;
     background: #d7582d;
  }

  body,
  .contentover,
  .content {
     flex-direction: column;
  }

  .progress-container {
     height: 30px;
  }

  .playertitletags,
  .playerimage {
     display: none;
  }

  .musicbar {
     margin-left: 0px;
  }

  .player_nav {
     flex-direction: column;
     padding-top: 10px;
  }

  .leftside {
     width: 99%;
  }

  /* start new code */
  .leftside {
     width: 100%;
     box-sizing: border-box;
  }

  .fisrstblock {
     box-sizing: border-box;
  }

  /* end new code */

  .form_center {
     padding: 0px;
     min-width: 360px;
  }

  .promt_select {
     font-size: 12px !important;
  }

  .mobilemenu {
     display: block;
  }

  .nicname,
  .mainmenu,
  .bott_t,
  .submainmenu {
     display: none;
  }

  .smbutton {
     flex-direction: column;
  }

  .titlegroup {
     padding-left: 3px;
     flex-grow: 1;
  }

  .pref select,
  .form_block_row select {
     width: 120px;
     max-width: 360px;
  }

  .uppball_p {
     display: flex;
     flex-direction: inherit;
     justify-content: space-around;
  }

  .recreateimage {
     position: absolute;
     bottom: 19px;
     background: white;
     color: #444;
     left: 1px;
     font-size: 10px;
  }

  .recreateimagevideo {
     position: absolute;
     bottom: 20px;
     font-size: 10px;
     background: white;
     color: #444;
     right: 0px;
  }

  figcaption span {
     font-size: 10px;
  }
}

.graybtnbig {
  /* Buttons M */

  box-sizing: border-box;

  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  width: 100%;

  background: rgba(255, 255, 255, 0.15);
  border-radius: 32px;

  /* Inside auto layout */
  flex: none;
  align-self: stretch;

}

.createbtn2 {
  /* Buttons M */

  box-sizing: border-box;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 16px 8px;
  gap: 8px;
  width: 100%;
  height: 45px;
  /* Main */
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
     /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
  ;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 32px;
  cursor: pointer;
}

.createbtn2:hover {
  /* Main */
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
     /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
  ;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0px 0px 24.6492px #97364B;
  border-radius: 32px;
}

.createbtn {
  /* Buttons M */

  box-sizing: border-box;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 16px 8px;
  gap: 8px;
  width: 340px;
  height: 45px;
  /* Main */
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
     /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
  ;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 32px;
  cursor: pointer;
}

.createbtn:hover {
  /* Main */
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
     /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
  ;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0px 0px 24.6492px #97364B;
  border-radius: 32px;
}

.iconright {
  cursor: pointer;
}

.textblock {
  padding: 10px;
}

.textblock {
  color: white;
}

.mw580px {
  max-width: 580px;
}

.form_block_row {
  color: #C9C9CB;
  display: flex;

  align-items: stretch;
}

.round {
  border-radius: 50%;
}

.form_block_row .promo {
  box-sizing: border-box;
  width: 422px;
  height: 80px;
  border: 1px solid #333335;
  border-radius: 16px;
  margin: 30px;
  color: #C9C9CB;
  font-size: 16px;
}

.form_block_row .paysumm {
  border: none;
  color: white;
  font-size: 56px;
  width: 120px;
}

.form_block_row .text {
  background: none;
  outline: none;
  text-align: center;
}

.form_block_row button.round {
  width: 56px;
  height: 56px;
  font-size: 30px;
}

.form_block_row span {
  color: #8D8D8F;
}

.mb10 {
  margin-bottom: 10px;
}

::-webkit-input-placeholder {
  /* Chrome */
  color: #49494A;
  font-size: 14px;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #49494A;
  font-size: 14px;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #49494A;
  opacity: 1;
  font-size: 14px;
}

:-moz-placeholder {
  /* Firefox 4 - 18 */
  color: #49494A;
  opacity: 1;
  font-size: 14px;
}

.paybtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 422px;
  height: 80px;
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
     /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
  ;
  border-radius: 16px;
  color: #FFFFFF;
  font-size: 20px;
}

.blockcenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatarmenu {
  display: none;
}

.overlay {
  position: fixed;
  overflow: scroll;
  left: 0px;
  top: 0px;
  display: none;
  z-index: 24100;
  background-color: rgba(16, 15, 15, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.overlayclosed {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1011;
}

.overlaycontainer {
  z-index: 25000;
}

.mobilemenu_btn_container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobilemenu_btn_container>img {
  width: 24px;
  height: 24px;
}

.bbt.login {
  padding: 8px 16px;
  width: auto;
  height: auto;
  font-size: 16px;
}

.create_music_mobile {
  display: none;

  @media screen and (max-width: 1024px) {
     display: flex;
     order: unset;
     width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .mobilemenu.mobile_header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
  }

  .create_music_desktop {
     display: none;
  }
}

.mobile {
  display: none;

  @media screen and (max-width: 1024px) {
     display: unset;
  }
}

.mobile_container {
  display: none;

  @media screen and (max-width: 1024px) {
     display: flex;
  }
}

.gallery_button {
  background-color: white;
  flex: 1;
  height: 2px;
  cursor: pointer;
  opacity: 0.3;
}

.chosen_gallery {
  opacity: 1;
}

.gallery_buttons {
  display: flex;
  width: 100%;
  gap: 13px;
}

.gallery_buttons_desktop {
  align-self: flex-end;
  width: 128px;
  margin-top: 35px;

  @media screen and (max-width: 1024px) {
     display: none;
  }
}

.create_music_desktop {
  order: unset;
}

/* start new code 38 */
.close_button {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 28px;
  right: 24px;
  fill: white;
}

.authform2 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0;
  padding: 0 16px;
}

.firstblock {
  box-sizing: border-box;
}

.auth_buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.auth_block {
  background-color: #1f1f21;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: unset;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 12px;
  padding: 0 8px;
  margin-bottom: 0;
}

.logomobile {
  display: none;
}

@media screen and (max-width: 1024px) {
  .nicname2 {
     display: none !important;
  }

  .profile_block {
     right: 10px !important;
     top: 34px !important;
     left: auto !important;
     height: 43px !important;
     width: 140px !important;
     display: flex !important;
  }

  .profile_menu {
     transform: none !important;
     left: 0px !important;
     top: 90px !important;
     border: 0px !important;
     border-radius: 0px !important;
     height: 100% !important;
     width: 100% !important;
  }

  .profile_name,
  .shavmen {
     display: none;
  }

  .profile svg {
     order: 1;
  }

  .profile {
     width: 100%;
     justify-content: space-around;
  }

  .nicname.nicnameshow {
     display: unset !important;
  }

  .logomobile {
     display: unset;
  }
}

.VkIdSdk_oauth_item {
  background-color: #1f1f21 !important;
}

.VkIdSdk_oauth_list {
  height: unset !important;
}

.authname h2 {
  margin: 0;
}

.formblock {
  background-color: unset;
}

.nicname {
  padding: 0;
  margin-bottom: 10px;
}

.bbt.login {
  display: flex;
  align-items: center;
  /* color: #de2b2b; */
  color: #2bde90;
  background: unset;
  border: 1px solid #ffffff26;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 23999;
  width: 87%;
}

.playerclose {
  position: absolute;
  right: 20px;
  top: 10px;
}

/* start new code 92 */
.fisrstblock {
  overflow-y: scroll;
}

.faq {
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: white;
  max-width: 1156px;
}

.faq_title {
  margin: 0;
}

.faq_questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq_question {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid #333335;
  cursor: pointer;
}

.faq_question:hover {
  background: #333335;
  border-color: #333335;
}

.faq_question_block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq_question_text {
  font-size: 18px;
  font-weight: 600;
}

.faq_question_icon {
  min-width: 24px;
  height: 24px;
  fill: white;
}

.faq_question_answer {
  padding: 16px;
  border-radius: 16px;
  background-color: #1f1f21;
}

/*  end new code 92 */
.flex_c {
  display: flex;
  flex-direction: column;
}

.textarea_counter {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  text-align: right;
  letter-spacing: -0.03em;
  color: #49494A;

}

.inserttemplate {
  display: none;
}

textarea {
  background: #1c1c1f;
  outline: none;
  border: none;
  color: #fff;
  flex-grow: 1;
  resize: vertical;
}

.mt10 {
  margin-top: 10px;
}

.selectbtbn:hover {
  background-color: #54545c !important;
  background: #54545c !important;
  border: none !important;

}

.selectbtbn {
  background-color: #252529 !important;
  background: #252529 !important;
  border: none !important;

}

.createcover {
  position: absolute;
  right: 5px;
  bottom: 3px;
}

.musicabout img {
  max-width: 280px;
  max-width: 100%;
}

.musicabout figure {
  position: relative;
  border-radius: 12px;
  padding: 0px;
  margin: 0px;
}

.coverreplace {
  position: absolute;
  bottom: 10px;
}

.coverreplace_ok {
  display: none;
  position: absolute;
  bottom: 10px;
}

.alertblock {
  position: fixed;
  bottom: 20px;
  z-index: 20000;
  color: #fff;
  left: 45%;
  display: none;
  font-size: 14px;
  color: #151517;
  padding: 10px;
  background: #2BDE90;
  border-radius: 24px;



}

.itemnumber {
  font-size: 50px;
  position: absolute;
  color: #eb7730;
  font-weight: bold;
  left: 10px;
}

.fixedcenter {
  position: fixed;
  bottom: 10px;
  align-items: center;
  z-index: 19000;
  width: -moz-available
}

.videclip_content {
  display: none !important;
}

.clippreloader {
  display: flex;
  width: 360px;
  height: 200px;
  justify-content: center;
  align-items: center;
}

.videoclipwindow_modalwindow_video_block {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* start new code 95 */
.leftside_footer {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 32px;
  margin-bottom: 95px;

  @media screen and (max-width: 1024px) {
     display: none;
  }
}

.bonus_block {
  display: flex;
  flex-direction: column;
  gap: 35px;
  background-image: url(https://veosuno.ru/img/bonus.png);
  background-size: cover;
  padding: 16px;
  border-radius: 32px;
}

.bonus_block_text {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.leftside {
  min-width: 242px;
}

.bonus_subscribe_btn {
  color: #c9c9cb;
  background-color: #ffffff26;
  border: 1px solid #ffffff26;
  padding: 8px 16px;
  border-radius: 32px;
}

.support {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.leftside {
  justify-content: space-between;
}

.profile_block {
  padding: 8px;
  border: 1px solid #ffffff26;
  border-radius: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: start;
  cursor: pointer;
  margin: 0;
  position: fixed;
  z-index: 24000;
  left: 10px;
  bottom: 10px;
  width: 212px;
}

.profile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile_menu_out {
  display: flex;
  color: #6a6a72;
  cursor: pointer;
  align-items: normal;
  gap: 8px;
  white-space: nowrap;
}

.profile_menu_item {
  display: flex;
  color: #6a6a72;
  cursor: pointer;
  align-items: normal;
  gap: 8px;
  white-space: nowrap;
}

.profile_menu_item img {
  width: 16px;
}

.profile_name {
  color: white;
  font-size: 16px;
}

.profile_balance {
  color: #de762b;
  font-size: 14px;
}

.profile_menu {
  position: absolute;
  bottom: 7px;
  left: -16px;
  transform: translateX(100%);
  background-color: #1f1f21;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: fit-content;
  padding: 20px;
  border-radius: 24px;
  font-size: 16px;
  z-index: 1;
  width: 258px;
  box-sizing: border-box;
}

.profile_menu_balance_block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background-color: #333335;
  box-sizing: border-box;
}

.profile_menu_balance_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.profile_menu_balance_btn {
  background: #e54270;
  background: radial-gradient(140.16% 200% at -10.1% 18.89%,
        #de642b 0%,
        #e54270 100%);
  padding: 8px 16px;
  border-radius: 32px;
  color: white;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.profile_menu_user_block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #c9c9cb;
}

.divider {
  height: 1px;
  width: 100%;
  background-color: #333335;
}

/* end new code 95 */
/* start new code 97 */
.ref {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 16px;
  max-width: 1166px;
}

.ref_title {
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.ref_container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ref_header_block {
  display: flex;
  align-items: center;
  background-color: #000000;
}

.ref_banner {
  flex: 1;
  height: 240px;
  background-image: linear-gradient(to right,
        rgba(0, 0, 0, 1),
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.05),
        rgba(0, 0, 0, 1)),
     url("https://veosuno.ru/img/ref_banner.png");
  background-size: cover;
}

.ref_header {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 72px 24px 88px 24px;
}

.ref_header_title {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.ref_header_desc {
  margin: 0;
  color: #8d8d8f;
  font-size: 16px;
}

.ref_block {
  display: flex;
  flex-direction: column;
  background-color: #1f1f21;
  border-radius: 24px;
  max-width: 574px;
  width: 279px;
  height: 258px;
  padding: 16px;
  box-sizing: border-box;
}

.ref_block_title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

.ref_big_text {
  font-size: 60px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.ref_block_centered {
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.ref_withdraw_button {
  margin: 0;
  background: #e54270;
  background: radial-gradient(140.16% 200% at -10.1% 18.89%,
        #de642b 0%,
        #e54270 100%);
  padding: 8px 16px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  gap: 8px;
  width: 100%;
  height: 36px;
}

.ref_block_desc {
  margin: 0;
  font-size: 16px;
  color: #8d8d8f;
}

.ref_link {
  background-color: #333335;
  padding: 8.5px 16px 10.5px 16px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  width: fit-content;
  margin: 0;
}

.ref_link_btn {
  background-color: #e54270;
  background: radial-gradient(140.16% 200% at -10.1% 18.89%,
        #de642b 0%,
        #e54270 100%);
  padding: 8px 16px;
  border-radius: 32px;
  color: #ffffff;
  font-size: 16px;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 0;
}

.ref_content {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ref_level_text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ref_level {
  width: 100%;
  height: 4px;
  background-color: #49494a;
}

.ref_level_line {
  width: 67%;
  height: 100%;
  background: #e54270;
  background: radial-gradient(140.16% 200% at -10.1% 18.89%,
        #de642b 0%,
        #e54270 100%);
}

.ref_tutorial {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ref_tutorial_step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #ffffff;
}

.step_number {
  background-color: #49494a;
  border-radius: 50%;
  padding: 1px 6px;
  line-height: 130%;
  font-size: 14px;
}

/* end new code 97 */
/* start new code 103 */
.rightside {
  margin: 16px;
  border: 1px solid #1F1F21;
  border-radius: 24px;
  background: #151517;
}

.musicabout {
  display: flex;
  flex-direction: column;
  gap: 44px;
  align-items: center;
  padding: 16px;
  position: relative;
}

.music_header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 211px;
  align-items: center;
}

.music_header_buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.music_header_like_btn {
  margin: 0;
  padding: 0 8px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 24px;
  border: none;
  background-color: #333335;
  box-sizing: border-box;
  font-size: 14px;
}

.music_header_like_btn:hover {
  background: #444;
}

.music_header_share_btn {
  border: 1px solid #FFFFFF26;
  border-radius: 32px;
  padding: 8px 16px;
  box-sizing: border-box;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}

.music_header_share_btn:hover {
  background: #444;
}

.musictext {
  padding: 0;
  margin: 0;
}

.music_aboutprompt {
  margin: 0;
}

.music_title_block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.music_about_desc {
  font-size: 16px;
  color: #C9C9CB;
}

.music_abouttitle {
  margin-bottom: 8px;
}

.music_remix_btn {
  font-size: 16px;
  gap: 8px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333335;
  border-radius: 15px;
}

.music_remix_btn:hover {
  background-color: #54545c;
}

.music_songs_block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.music_songs_input {
  padding: 0;
  border: none;
  font-size: 16px;
  width: 100%;
  height: 100%;
  color: white;
  background-color: #333335;
  outline: none;
}

.music_songs_input_wrapper {
  box-sizing: border-box;
  width: 100%;
  position: relative;
  display: flex;
  padding: 7px 8px;
  border-radius: 24px;
  background-color: #333335;
  gap: 8px;
}

.music_song {
  display: flex;
  flex-direction: column;
  background-color: #1F1F21;
  border-radius: 16px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;

}

.music_song_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.music_song_header_speak {
  display: flex;
  align-items: center;
  gap: 8px;
}

.music_song_download_btn {
  background-color: #333335;
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 50%;
}

.music_song_download_btn:hover {
  background-color: #54545c;
}

.music_song_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.music_song_footer_play_line {
  background-color: #333335;
  width: 158px;
  height: 8px;
}

.music_song_footer_played_line {
  background-color: white;
  width: 50%;
  height: 100%;
}

.music_song_footer_play {
  display: flex;
  align-items: center;
  gap: 8px;
}

.music_song_footer_play_img {
  height: 24px;
}

.music_song_footer_volume {
  display: flex;
  align-items: center;
  gap: 4px;
}

.music_song_footer_volume_full_line {
  background-color: #FFFFFF40;
  width: 45px;
  height: 4px;
}

.music_song_footer_volume_line {
  background-color: white;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.music_song_footer_volume_btn {
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  top: -50%;
}

/* end new code 103 */

figure:hover .massimg {
  display: none;
}

figure:hover video {
  display: block !important;
}

.massimg {
  width: 100%;
  border-radius: 15px;
}

.secsel,
.orientationsel {
  background-color: #e45226 !important;
}

.rotate-90 {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-rotate: 90deg;
}


.prompt_form {
  margin-top: 40px;
  margin-left: 12px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.prompt_row {}

.promt_select {
  border-radius: 24px;
  border: 1px solid #49494A;
  padding-left: 11px;
  padding-right: 11px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 34px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

red {
  color: #E25250
}

green {
  color: green;
}

.promt_select_name {
  margin-left: 10px;
  flex-grow: 1;
}

.promt_select_subname {
  margin-right: 10px;
  white-space: nowrap;

}

.prompt_textarea {
  border-radius: 24px;
  background: #1c1c1f;
  border: 1px solid #1c1c1f;
  display: flex;
  justify-content: baseline;
  flex-direction: row;
  padding: 10px;
  margin-top: 10px;
}

.prompt_textarea textarea {
  background: #1c1c1f;
  outline: none;
  border: none;
  color: #fff;
  flex-grow: 1;
  resize: vertical;
}

.red {
  border: 1px solid red;
}

.error {
  font-size: 13px;
  color: red;
}

.prompt_textarea_buttons button {
  padding: 0px !important;
}

.prompt_textarea_buttons {
  display: flex;
  flex-direction: column;
}

.flexrow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.w45 {
  width: 43%;
}

.promt_imageload span {
  text-align: center;
  color: #fff;
}

.promt_imageload {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  position: relative;
  overflow: hidden;
}

.prompt_row_row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.mt10 {
  margin-top: 10px;
}

.p0 {
  padding: 0px;
}

.prompt_textarea .img {
  width: 100%;
}

.promt_imageload .clearimage {
  position: absolute;
  right: 1px;
  top: 1px;
  display: none;
}

.createbtn span {
  color: #fff;
}

.figureload {
  background: #1c1c1f;
  border-radius: 24px;
}

.f_blockimage_coll .progress {
  font-size: 1px;
}

.deleteicon {
  position: absolute;
  right: 5px;
  top: 3px;
}

.sound {
  position: absolute;
  left: 5px;
  top: 3px;
}

.copylink {
  position: absolute;
  left: 3px;
  bottom: 3px;
}

.playdbtn {
  position: absolute;
  left: 3px;
  top: 3px;
}

.downloadbtn {
  position: absolute;
  left: 40px;
  bottom: 3px;
}

.recreate {
  position: absolute;
  right: 5px;
  bottom: 3px;
}

.modalwindow {
  position: fixed;
  left: 0px;
  top: 0px;
  display: none;
  z-index: 1010;
  background-color: rgba(16, 15, 15, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.modal-body {
  background: #1F1F21;
  border-radius: 24px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 1021;
}

.modal-body video {
  border-radius: 24px;
}

.modal-info {
  width: 300px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: baseline;
}

.modal-info_row h3 {
  padding-right: 5px;
  font-size: 18px;
  margin: 0px
}

.modal-info_row img {
  width: 64px;
  border-radius: 12px;
}

.modal-info_row {
  color: #fff;
  justify-content: start;
  display: flex;
  align-items: baseline;
}

.textprompt {
  color: #fff;
  font-size: 14px;
}

.modalclose {
  position: absolute;
  right: 9px;
  top: 9px;
  cursor: pointer;
}

.modal-closed {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1011;
}

#modalwindow_video {
  max-height: 600px;
}

.copyprompt {
  cursor: pointer;
}

.roundbg {
  /* Tags */

  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px 8px 0px;
  gap: 8px;
  margin-right: 5px;
  height: 28px;

  /* Gray 4 */
  background: #333335;
  border-radius: 24px;

  /* Text 14 */
  font-family: 'Segoe UI';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  color: #FFFFFF;


  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;

}

.round1 {
  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 16px 8px;
  gap: 8px;
  color: #fff;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 32px;

}

.round2 {
  background: #414142;
}

.alertblock {
  position: fixed;
  bottom: 20px;
  z-index: 20000;
  background: #101012;
  color: #fff;
  left: 45%;
  display: none;
}

.selectmodal {
  position: absolute;
  /* DropList */

  box-sizing: border-box;

  /* Auto layout */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: absolute;
  left: 482px;
  top: 343px;
  width: 200px;
  /* Gray 5 */
  background: #1F1F21;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  align-items: normal;
  justify-content: flex-start
}

.modalitem {
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 6px 15px 8px;
  cursor: pointer;
}

.modalitem:hover {

  color: #fff;
  background: rgba(255, 255, 255, 0.1);

}

.modalitem.sel {
  background: url('https://veosuno.ru/img/okitem.png') no-repeat;
  color: #E54270;
  background-position-x: 95%;
  background-position-y: 50%;

}

.selectmodal {
  display: none;
}

.newcreate {
  position: absolute;
  right: 5px;
  bottom: 3px;

}

.subbtn {
  display: none;
  position: absolute;

  width: 159px;
  bottom: 1px !important;
  height: 36px;
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 32px;
}

.videoclipwindow {
  position: fixed;
  left: 0px;
  top: 0px;
  display: none;
  z-index: 240000;
  background-color: rgba(16, 15, 15, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#masonry figure {
  position: absolute;
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  color: white;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 18px;
  margin: 0px;
}

#masonry {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 0;
}


/* @charset "UTF-8"; */

@font-face {
  font-family: "OpenSans";
  font-display: swap;
  src: url("https://veosuno.ru/fonts/OpenSans-Regular.woff2") format("woff2"), url("https://veosuno.ru/fonts/OpenSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "OpenSans";
  font-display: swap;
  src: url("https://veosuno.ru/fonts/OpenSans-Bold.woff2") format("woff2"), url("../fonhttps://veosuno.ru/OpenSans-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "OpenSans";
  font-display: swap;
  src: url("https://veosuno.ru/fonts/OpenSans-SemiBold.woff2") format("woff2"), url("../fonhttps://veosuno.ru/OpenSans-SemiBold.woff") format("woff");
  font-weight: 600; /* исправление */
  font-style: normal;
}

@font-face {
  font-family: "OpenSans";
  font-display: swap;
  src: url("https://veosuno.ru/fonts/OpenSans-ExtraBold.woff2") format("woff2"), url("https://veosuno.ru/fonts/OpenSans-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "OpenSans";
  font-display: swap;
  src: url("https://veosuno.ru/fonts/OpenSans-Light.woff2") format("woff2"), url("https://veosuno.ru/fonts/OpenSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

body {
  font-family: "OpenSans", sans-serif !important; /* исправление */
  font-weight: normal;
}


body,
html {
  max-width: 100%;
}

.fisrstblock {
  width: calc(100vw - 242px);
  padding-left: 16px;
  padding-right: 16px;
  overflow-x: hidden;
  box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
  .fisrstblock {
    width: 100vw;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/***** BLOCKS GLOBAL *****/
/***** COMPONENTS GLOBAL *****/
.section {
  margin-bottom: 60px;
}

.section-heading {
  width: 100%;
  margin-bottom: 20px;
}

.section-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: #fff;
}

.section-title:not(:last-child) {
  margin-bottom: 12px;
}

.section-subtitle {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
}

.section-subtitle:not(:last-child) {
  margin-bottom: 12px;
}

.section-models {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #fff;
}

.section-models-item {
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
}

.section-models-icon {
  height: 16px;
  vertical-align: top;
  margin-top: 2px;
  width: 16px;
}

.section-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 12px;
  width: 100%;
}

.section-footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  letter-spacing: 0.005em;
  padding: 0 16px;
  border-radius: 32px;
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%);
  transition: all 0.5s ease;
}

.section-footer-cta:hover {
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #E54270 0%, #DE642B 100%);
  box-shadow: 0px 0px 24.65px 0px #97364B;
}

@media screen and (max-width: 1024px) {
  .section {
    margin-bottom: 40px;
  }

  .section-title {
    font-size: 24px;
  }

  .section-title:not(:last-child) {
    margin-bottom: 8px;
  }

  .section-subtitle:not(:last-child) {
    margin-bottom: 8px;
  }
}

@media screen and (max-width: 576px) {
  .section-heading {
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 20px;
  }

  .section-title:not(:last-child) {
    margin-bottom: 6px;
  }

  .section-subtitle {
    font-size: 15px;
  }

  .section-subtitle:not(:last-child) {
    margin-bottom: 6px;
  }

  .section-models {
    font-size: 14px;
  }

  .section-models-item {
    margin-top: 5px;
  }

  .section-footer {
    padding-top: 8px;
  }
}

.swiper {
  width: 100%;
  max-width: 100%;
}

.slider-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  outline: none;
  border: 0;
  color: #fff !important;
  background-color: #49494A;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.slider-button svg {
  width: 100%;
  height: 100%;
}

.slider-button:not(:last-child) {
  margin-right: 20px;
}

.slider-button:hover {
  background-color: #DE762B;
}

.slider-button.swiper-button-disabled {
  background-color: #49494A;
  opacity: 0.5;
  cursor: auto;
}

.slider-button.swiper-button-lock {
  display: none;
}

@media screen and (max-width: 1024px) {
  .slider-button:not(:last-child) {
    margin-right: 16px;
  }
}

/***** SECTIONS GLOBAL (Widgets) *****/
.head-section__slider {
  position: relative;
  width: 100%;
  min-height: 390px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 60px;
  background: #000000;
}

.head-section__slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 40px 80px;
}

.head-section__slide:nth-child(3) .head-section__description {
  max-width: 440px;
}

.head-section__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.head-section__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  color: #fff;
}

.head-section__title {
  margin: 0 0 20px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.head-section__description {
  margin: 0 0 32px 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
}

.head-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: linear-gradient(135deg, #DE642B 0%, #E54270 100%);
  border: none;
  border-radius: 50px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.head-section__button:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(222, 100, 43, 0.3);
}

.head-section__pagination {
  position: absolute;
  bottom: 40px !important;
  left: auto !important;
  right: 40px;
  transform: none !important;
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  z-index: 50;
}

.head-section__pagination .swiper-pagination-bullet {
  margin: 0 !important;
  width: 32px;
  height: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  opacity: 1;
  transition: all 0.3s ease;
}

.head-section__pagination .swiper-pagination-bullet-active {
  background: #fff;
}

@media screen and (max-width: 1024px) {
  .head-section__slider {
    min-height: 320px;
    border-radius: 20px;
    margin-bottom: 40px;
  }

  .head-section__slide {
    padding: 24px 40px;
  }

  .head-section__slide:nth-child(3) .head-section__description {
    max-width: 380px;
  }

  .head-section__content {
    max-width: 420px;
  }

  .head-section__title {
    margin-bottom: 14px;
    font-size: 36px;
  }

  .head-section__description {
    margin-bottom: 24px;
    font-size: 20px;
  }

  .head-section__button {
    padding: 10px 24px;
    font-size: 16px;
  }

  .head-section__pagination {
    bottom: 28px !important;
    right: 28px;
    gap: 12px;
  }

  .head-section__pagination .swiper-pagination-bullet {
    width: 24px;
    height: 3px;
  }
}

@media screen and (max-width: 1024px) {
  .head-section__slider {
    min-height: 260px;
  }

  .head-section__slide {
    padding: 20px 20px;
  }

  .head-section__slide:nth-child(3) .head-section__description {
    max-width: 310px;
  }

  .head-section__content {
    max-width: 310px;
  }

  .head-section__title {
    margin-bottom: 10px;
    font-size: 24px;
  }

  .head-section__description {
    margin-bottom: 16px;
    font-size: 16px;
  }

  .head-section__button {
    padding: 7px 20px;
    font-size: 15px;
  }

  .head-section__pagination {
    bottom: 16px !important;
    right: 20px;
    gap: 10px;
  }

  .head-section__pagination .swiper-pagination-bullet {
    width: 20px;
    height: 2px;
  }
}

.banner {
  /* Карточка баннера */
}

.banners {
  /* Блок-обертка для баннеров */
}

.banners-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.46%, 2.46%, 40px);
  padding-top: 60px;
  margin-bottom: 70px;
  width: 100%;
  max-width: 100%;
}

.banner-card {
  display: block;
  position: relative;
  padding: 32px;
  border-radius: 28px;
  text-decoration: none !important;
  color: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
  min-height: 120px;
  background-color: #1F1F21;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1F1F21", endColorstr="#151517", GradientType=0);
  background: -webkit-linear-gradient(12deg, #1F1F21 0%, #151517 95%);
  background: -moz-linear-gradient(12deg, #1F1F21 0%, #151517 95%);
  background: -o-linear-gradient(12deg, #1F1F21 0%, #151517 95%);
  background: linear-gradient(12deg, #1F1F21 0%, #151517 95%);
  z-index: 0;
  /* Абсолютно позиционированная иконка */
}

.banner-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://veosuno.ru/images/banners-section-card-background.webp");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: auto 100%;
  z-index: -1;
}

.banner-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://veosuno.ru/images/banners-section-card-blur.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.banner-card:hover {
  box-shadow: 0px 4px 44px 0px rgba(0, 0, 0, 0.75);
}

.banner-card:hover::after {
  opacity: 1;
}

.banner-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  position: relative;
  z-index: 2;
}

.banner-card__title {
  font-size: 36px;
  font-weight: bold;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.banner-card__price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -3%;
  color: #fff;
  border-radius: 50px;
  background-color: rgb(51, 51, 53);
}

.banner-card__icon img {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 100%;
  z-index: 1;
  object-fit: contain;
}

@media screen and (max-width: 1024px) {
  .banners-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-top: 40px;
    margin-bottom: 40px;
  }

  .banner-card {
    padding: 32px;
    border-radius: 28px;
    min-height: 100px;
  }

  .banner-card__title {
    font-size: 28px;
  }
}

@media screen and (max-width: 1024px) {
  .banners-section {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }

  .banner-card {
    padding: 20px;
    border-radius: 20px;
    min-height: 80px;
  }

  .banner-card::after {
    opacity: 1;
  }

  .banner-card__icon img {
    height: 90%;
    top: 5%;
  }

  .banner-card__title {
    font-size: 20px;
  }
}

.tracks-columns {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(2.46%, 2.46%, 40px);
  margin-bottom: 60px;
}

.tracks-column {
  width: 33.33%;
  max-width: 33.33%;
}

.tracks-column__title {
  margin-top: 0;
  margin-bottom: 20px;
  padding-left: 8px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #fff;
}

.tracks-column__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.track-item {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  padding: 8px;
  border-radius: 12px;
  box-sizing: border-box;
  background-color: transparent;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.track-item:hover {
  background-color: #1F1F21;
}

.track-item:hover .track-item__play-btn {
  opacity: 1;
}

.track-item:hover .playanimation {
  opacity: 0 !important;
}



.playanimation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

.track-item__image_played .playanimation {
  opacity: 100;
}

.track-item:hover .track-item__remix-btn {
  opacity: 1;
}

.track-item:hover .track-item__image img {
  opacity: 0.8;
}

.track-item__image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  width: 60px;
  min-height: 80px;
  margin-right: 12px;
}

.track-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.3s ease;
}

.track-item__image:hover img {
  transform: scale(1.05);
}

.track-item__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

.track-item__play-btn svg {
  width: 100%;
  height: auto;
}

.track-item__play-btn svg.pause {
  display: none;
}

.track-item__info {
  display: flex;
  flex-direction: column;
  width: calc(100% - 72px);
}

.track-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.track-item__head-info {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.track-item__title {
  margin-top: 2px;
  margin-bottom: 6px;
  margin-right: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
}

.track-item__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 6px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.03em;
  color: #fff;
  min-height: 24px;
  padding: 3px 8px 4px 8px;
  border-radius: 50px;
  background-color: rgba(201, 201, 203, 0.2);
}

.track-item__tag:not(:last-child) {
  margin-right: 6px;
}

.track-item__description {
  margin-top: 4px;
  margin-bottom: 12px;
  max-width: calc(100% - 16px);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #C9C9CB;
  overflow: hidden;
  height: 18px;
}

.track-item__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
}

.track-item__author {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.track-item__author-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 4px;
}

.track-item__author-name {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #C9C9CB;
}

.track-item__stats {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.track-item__stats-item {
  margin-left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.track-item__stats-item::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 4px;
  opacity: 0.7;
}

.track-item__stats-item span {
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: left;
  color: rgb(255, 255, 255);
}

.track-item__stats-item--views::before {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 12.6573V3.34271C3.5 2.54928 4.37974 2.07186 5.04499 2.50427L12.2101 7.16158C12.8168 7.55593 12.8168 8.44413 12.2101 8.83847L5.04499 13.4958C4.37974 13.9282 3.5 13.4508 3.5 12.6573Z" fill="white"/></svg>');
}

.track-item__stats-item--likes::before {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.09961 1.74305C8.41014 1.63545 8.77741 1.60919 9.12109 1.73523L9.12207 1.73328C9.84654 1.97685 10.3361 2.77328 10.1826 3.52918L10.1836 3.53016L9.86523 5.57801L9.86621 5.57898C9.83282 5.81458 9.9843 5.95008 10.1562 5.95008H12.7021C13.2752 5.95008 13.7688 6.18388 14.0664 6.5907C14.3636 6.99733 14.4325 7.53396 14.2432 8.07605L14.2441 8.07703L12.7168 12.7606L12.7158 12.7596C12.5928 13.2284 12.2872 13.6219 11.915 13.8964C11.5371 14.1751 11.0681 14.3495 10.6016 14.3495H8.18262C7.95766 14.3495 7.68649 14.3129 7.43359 14.2401C7.19944 14.1727 6.93811 14.0615 6.75 13.8846L4.78516 12.3505L5 12.0751L5.21484 11.7987L7.18848 13.3387L7.20605 13.3524L7.22168 13.368C7.28685 13.4337 7.42599 13.5094 7.62695 13.5673C7.8195 13.6227 8.02575 13.6503 8.18262 13.6503H10.6016C10.8989 13.6503 11.2255 13.5354 11.5 13.3329C11.774 13.1307 11.9718 12.859 12.0439 12.5682L12.0469 12.5555L12.0508 12.5438L13.5791 7.86023L13.582 7.85144C13.7071 7.49831 13.6487 7.20449 13.502 7.00379C13.3539 6.80128 13.0837 6.65027 12.7021 6.65027H10.1562C9.56442 6.65027 9.07908 6.14392 9.17285 5.48133L9.17383 5.47644L9.49219 3.42371L9.49316 3.41199L9.49609 3.40125C9.58232 3.00907 9.3122 2.53637 8.89844 2.39734L8.88672 2.39344V2.39246C8.72466 2.3312 8.52413 2.3366 8.3291 2.40418C8.13182 2.47255 7.97812 2.59183 7.90137 2.70789V2.70887L5.29102 6.62293L4.70898 6.23426L7.31836 2.32019C7.4962 2.05193 7.78826 1.85102 8.09961 1.74305Z" fill="white"/><path d="M4.65039 6.11707C4.65032 5.7472 4.56799 5.58904 4.48047 5.50964C4.38406 5.4224 4.19418 5.34949 3.7998 5.34949H3.2002C2.80582 5.34949 2.61594 5.4224 2.51953 5.50964C2.43201 5.58904 2.34968 5.7472 2.34961 6.11707V11.8827C2.34968 12.2526 2.43201 12.4107 2.51953 12.4901C2.61594 12.5774 2.80582 12.6503 3.2002 12.6503H3.7998C4.19418 12.6503 4.38406 12.5774 4.48047 12.4901C4.56799 12.4107 4.65032 12.2526 4.65039 11.8827V6.11707ZM5.34961 11.8827C5.34954 12.3354 5.25237 12.7361 4.9502 13.0096C4.6566 13.2753 4.24543 13.3495 3.7998 13.3495H3.2002C2.75457 13.3495 2.3434 13.2753 2.0498 13.0096C1.74763 12.7361 1.65046 12.3354 1.65039 11.8827V6.11707C1.65046 5.66438 1.74763 5.26362 2.0498 4.99011C2.3434 4.72442 2.75457 4.65027 3.2002 4.65027H3.7998C4.24543 4.65027 4.6566 4.72442 4.9502 4.99011C5.25237 5.26362 5.34954 5.66438 5.34961 6.11707V11.8827Z" fill="white"/></svg>');
}

.track-item__stats-item--comments::before {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7998 7.26819C14.7996 4.19526 11.8594 1.52991 8 1.52991C4.14062 1.52991 1.20042 4.19526 1.2002 7.26819C1.2002 10.3414 4.14055 13.0074 8 13.0074V13.7076C3.85786 13.7076 0.5 10.8243 0.5 7.26819C0.500231 3.71228 3.85801 0.829712 8 0.829712C12.142 0.829712 15.4998 3.71228 15.5 7.26819C15.5 8.9199 14.7741 10.4254 13.583 11.5651L13.5098 11.6422C13.3455 11.8299 13.2436 12.0654 13.2373 12.316L13.1807 14.5846C13.1684 15.0664 12.6218 15.3378 12.2305 15.0563L10.3945 13.735C10.1584 13.5651 9.86025 13.5101 9.57422 13.5631L9.19043 13.6246C8.80278 13.6787 8.40528 13.7076 8 13.7076V13.0074C8.49615 13.0074 8.98036 12.9611 9.44727 12.8746C9.90117 12.7906 10.3964 12.8744 10.8027 13.1666L12.4844 14.3766L12.5371 12.2985C12.5495 11.8042 12.7767 11.3681 13.0996 11.0592C14.1704 10.0347 14.7998 8.70559 14.7998 7.26819Z" fill="white"/></svg>');
}

.track-item__remix-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 28px;
  padding: 2px 10px;
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #fff;
  border: none;
  border-radius: 50px;
  background: #DE642B;
  background: -webkit-radial-gradient(-10.1% 18.89%, ellipse cover, #DE642B 0%, #E54270 100%);
  background: -moz-radial-gradient(-10.1% 18.89%, ellipse cover, #DE642B 0%, #E54270 100%);
  background: radial-gradient(ellipse 140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%);
  opacity: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.track-item__remix-btn::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  flex-shrink: 0;
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.49024 2.65039C4.65766 2.64983 4.80229 2.76749 4.83496 2.93164V2.9336L4.84473 2.97754C4.85167 3.00887 4.86253 3.05497 4.87696 3.11231C4.90596 3.22757 4.94976 3.38633 5.00879 3.55957C5.13224 3.92185 5.30237 4.28907 5.50391 4.48926C5.70543 4.68942 6.07345 4.85752 6.43653 4.97852C6.61021 5.0364 6.76928 5.07919 6.88477 5.10742C6.94233 5.1215 6.9891 5.13194 7.02051 5.13867C7.036 5.14199 7.04801 5.14396 7.05567 5.14551C7.05922 5.14623 7.06178 5.14713 7.06348 5.14746H7.06543C7.23002 5.17882 7.34898 5.3227 7.34961 5.49024C7.35018 5.65783 7.2318 5.80151 7.06738 5.83399L7.06836 5.83496H7.06641L7.02246 5.84473C6.99114 5.85167 6.94504 5.86253 6.8877 5.87696C6.77244 5.90596 6.61368 5.94976 6.44043 6.00879C6.07815 6.13224 5.71093 6.30237 5.51074 6.50391C5.31058 6.70543 5.14249 7.07345 5.02149 7.43653C4.96361 7.61021 4.92081 7.76928 4.89258 7.88477C4.87851 7.94233 4.86807 7.9891 4.86133 8.02051C4.85801 8.036 4.85604 8.04801 4.85449 8.05567C4.85378 8.05922 4.85287 8.06178 4.85254 8.06348V8.06543C4.82118 8.23002 4.6773 8.34898 4.50977 8.34961C4.34217 8.35018 4.19752 8.2318 4.16504 8.06738V8.06641L4.15528 8.02246C4.14833 7.99114 4.13748 7.94504 4.12305 7.8877C4.09404 7.77244 4.05024 7.61368 3.99121 7.44043C3.86776 7.07815 3.69763 6.71093 3.4961 6.51074C3.29458 6.31058 2.92655 6.14249 2.56348 6.02149C2.38979 5.96361 2.23072 5.92082 2.11524 5.89258C2.05767 5.87851 2.0109 5.86807 1.97949 5.86133C1.96401 5.85801 1.95199 5.85604 1.94434 5.85449C1.94079 5.85378 1.93822 5.85287 1.93653 5.85254H1.93457C1.76998 5.82118 1.65102 5.6773 1.65039 5.50977C1.64983 5.34217 1.7682 5.19752 1.93262 5.16504H1.9336L1.97754 5.15528C2.00887 5.14833 2.05497 5.13748 2.11231 5.12305C2.22757 5.09404 2.38633 5.05024 2.55957 4.99121C2.92185 4.86776 3.28907 4.69763 3.48926 4.4961C3.68942 4.29458 3.85752 3.92655 3.97852 3.56348C4.0364 3.38979 4.07919 3.23072 4.10742 3.11524C4.1215 3.05767 4.13193 3.0109 4.13867 2.97949C4.14199 2.96401 4.14396 2.95199 4.14551 2.94434C4.14623 2.94079 4.14713 2.93822 4.14746 2.93653V2.93457C4.17882 2.76998 4.3227 2.65102 4.49024 2.65039ZM4.49512 4.17188C4.37126 4.46264 4.20521 4.76792 3.98535 4.98926C3.76554 5.21048 3.46168 5.37813 3.17188 5.50391C3.46275 5.62778 3.76783 5.79471 3.98926 6.01465C4.21027 6.23426 4.37817 6.5376 4.50391 6.82715C4.62775 6.53653 4.79492 6.23197 5.01465 6.01074C5.23435 5.78965 5.53749 5.62087 5.82715 5.49512C5.53664 5.3713 5.23188 5.205 5.01074 4.98535C4.78944 4.76545 4.62091 4.46179 4.49512 4.17188Z" fill="white"/><path d="M11.4873 5.65039C11.6546 5.64997 11.7984 5.76764 11.8311 5.93164L11.832 5.93262C11.8321 5.93315 11.8318 5.93439 11.832 5.93555C11.8326 5.93812 11.8339 5.94198 11.835 5.94727C11.8373 5.95859 11.8407 5.97651 11.8457 5.99902C11.8557 6.04402 11.8711 6.10981 11.8916 6.19141C11.9329 6.35552 11.9949 6.582 12.0791 6.8291C12.2529 7.33897 12.5009 7.87892 12.8076 8.18359C13.1143 8.48823 13.656 8.73205 14.167 8.90234C14.4147 8.98488 14.6413 9.04575 14.8057 9.08594C14.8876 9.10598 14.9539 9.12118 14.999 9.13086C15.0214 9.13566 15.0385 9.13932 15.0498 9.1416C15.0555 9.14275 15.0599 9.14304 15.0625 9.14356L15.0654 9.14453C15.2301 9.1759 15.349 9.31971 15.3496 9.48731C15.35 9.65477 15.2317 9.79958 15.0674 9.83203H15.0645C15.0619 9.83255 15.058 9.83386 15.0527 9.83496C15.0414 9.83733 15.0235 9.84071 15.001 9.8457C14.956 9.85568 14.8902 9.87107 14.8086 9.8916C14.6445 9.9329 14.418 9.9949 14.1709 10.0791C13.661 10.2529 13.1211 10.5009 12.8164 10.8076C12.5118 11.1143 12.268 11.656 12.0977 12.167C12.0151 12.4147 11.9543 12.6413 11.9141 12.8057C11.894 12.8876 11.8788 12.9539 11.8691 12.999C11.8643 13.0214 11.8607 13.0385 11.8584 13.0498C11.8573 13.0555 11.857 13.0599 11.8564 13.0625L11.8555 13.0654C11.8241 13.2301 11.6803 13.349 11.5127 13.3496C11.3454 13.35 11.2016 13.2324 11.1689 13.0684L11.168 13.0674C11.1679 13.0668 11.1682 13.0656 11.168 13.0645C11.1674 13.0619 11.1661 13.058 11.165 13.0527C11.1627 13.0414 11.1593 13.0235 11.1543 13.001C11.1443 12.956 11.1289 12.8902 11.1084 12.8086C11.0671 12.6445 11.0051 12.418 10.9209 12.1709C10.7471 11.661 10.4991 11.1211 10.1924 10.8164C9.88566 10.5118 9.34399 10.268 8.83301 10.0977C8.58534 10.0151 8.35872 9.95425 8.19434 9.91406C8.11236 9.89402 8.04608 9.87882 8.00098 9.86914C7.97861 9.86434 7.96149 9.86068 7.9502 9.8584C7.94453 9.85726 7.94012 9.85696 7.9375 9.85645L7.93457 9.85547C7.76994 9.8241 7.65096 9.68029 7.65039 9.5127C7.64997 9.34544 7.76764 9.20164 7.93164 9.16895L7.93262 9.16797C7.93315 9.16786 7.93439 9.16821 7.93555 9.16797C7.93812 9.16745 7.94198 9.16614 7.94727 9.16504C7.95859 9.16267 7.97651 9.15929 7.99902 9.1543C8.04402 9.14432 8.10981 9.12893 8.19141 9.1084C8.35552 9.0671 8.582 9.0051 8.8291 8.9209C9.33897 8.74715 9.87892 8.49913 10.1836 8.19238C10.4882 7.88566 10.732 7.34399 10.9023 6.83301C10.9849 6.58534 11.0457 6.35872 11.0859 6.19434C11.106 6.11236 11.1212 6.04608 11.1309 6.00098C11.1357 5.97861 11.1393 5.96149 11.1416 5.9502C11.1427 5.94453 11.143 5.94012 11.1436 5.9375L11.1445 5.93457L11.1611 5.875C11.2119 5.74187 11.3407 5.65089 11.4873 5.65039ZM11.4922 7.25586C11.3148 7.74284 11.0542 8.31048 10.6807 8.68652C10.3072 9.06243 9.74152 9.32621 9.25586 9.50684C9.74291 9.68421 10.3104 9.94575 10.6865 10.3193C11.0622 10.6926 11.3262 11.2577 11.5068 11.7432C11.6842 11.2563 11.946 10.6894 12.3193 10.3135C12.6927 9.93771 13.2576 9.67281 13.7432 9.49219C13.2564 9.31482 12.6893 9.05396 12.3135 8.68067C11.9375 8.30711 11.6728 7.74159 11.4922 7.25586Z" fill="white"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.track-item__remix-btn:hover {
  transform: translateY(calc(-50% - 1px));
}

.track-item__menu-container {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.track-item__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 24px;
  height: 24px;
  color: #fff;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.track-item__menu-btn svg {
  display: block;
  width: 16px;
  height: auto;
}

.track-item__menu-btn--open,
.track-item__menu-btn:hover {
  background-color: #333335;
}

.track-item__dropdown-menu {
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  left: -12px;
  margin-top: 16px;
  padding: 12px 0;
  min-width: 260px;
  border-radius: 24px;
  background-color: #333335;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 100;
}

.track-item__dropdown-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 2000;
}

.track-item__menu-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 8px 20px;
  min-height: 34px;
  border: none;
  outline: none;
  border-radius: 0;
  background-color: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.track-item__menu-item::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 8px;
  opacity: 0.7;
}

.track-item__menu-item span {
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: left;
  color: rgba(255, 255, 255, 0.7);
}

.track-item__menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.track-item__menu-item:hover::before {
  opacity: 1;
}

.track-item__menu-item:hover span {
  color: #fff;
}

.track-item__menu-item--repeat::before {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.983765 10.9333V8.40009C0.983765 7.03223 1.25476 5.98358 1.95251 5.28583C2.65027 4.58808 3.69892 4.31708 5.06677 4.31708H7.06677V5.0163H5.06677C3.76796 5.0163 2.94988 5.2787 2.44763 5.78094C1.94538 6.28319 1.68298 7.10127 1.68298 8.40009V10.9333C1.68298 12.2321 1.94538 13.0502 2.44763 13.5524C2.94988 14.0547 3.76796 14.3171 5.06677 14.3171H7.59998C8.89879 14.3171 9.71687 14.0547 10.2191 13.5524C10.7214 13.0502 10.9838 12.2321 10.9838 10.9333V8.93329H11.683V10.9333C11.683 12.3011 11.412 13.3498 10.7142 14.0475C10.0165 14.7453 8.96783 15.0163 7.59998 15.0163H5.06677C3.69892 15.0163 2.65027 14.7453 1.95251 14.0475C1.25476 13.3498 0.983765 12.3011 0.983765 10.9333Z" fill="white"/><path d="M6.93298 4.34344C7.06375 4.28932 7.21377 4.31954 7.31384 4.41961L11.5804 8.68622C11.6805 8.78629 11.7107 8.93632 11.6566 9.06708C11.6024 9.19786 11.4749 9.2829 11.3334 9.2829H9.20056C8.38117 9.2829 7.72265 9.15167 7.28552 8.71454C6.8485 8.27749 6.71721 7.61963 6.71716 6.80047V4.66669C6.71716 4.52512 6.8022 4.39762 6.93298 4.34344ZM7.41638 6.80047C7.41643 7.58075 7.55117 7.98992 7.78064 8.21942C8.01018 8.44896 8.41995 8.58368 9.20056 8.58368H10.4896L7.41638 5.51044V6.80047Z" fill="white"/><path d="M10.4004 0.983643V1.68286H7.7334V0.983643H10.4004Z" fill="white"/><path d="M8.4137 0.983704V1.68292H6.66663C5.75326 1.68292 5.01624 2.41995 5.01624 3.33331H4.31702C4.31702 2.03335 5.36666 0.983704 6.66663 0.983704H8.4137Z" fill="white"/><path d="M14.3168 9.46027V5.33331H15.017V9.46027C15.0168 10.6868 14.0199 11.6829 12.7933 11.6829V10.9837C13.6333 10.9837 14.3166 10.3002 14.3168 9.46027Z" fill="white"/><path d="M10.5328 1.01007C10.6636 0.955945 10.8136 0.986164 10.9137 1.08624L14.9137 5.08624C15.0138 5.18632 15.044 5.33633 14.9899 5.4671C14.9357 5.59789 14.8082 5.68292 14.6666 5.68292H12.6666C11.8972 5.68292 11.2734 5.55918 10.8571 5.14288C10.4408 4.72658 10.317 4.1027 10.317 3.33331V1.33331C10.317 1.19175 10.4021 1.06424 10.5328 1.01007ZM11.0162 3.33331C11.0162 4.06392 11.1425 4.44004 11.3512 4.64874C11.5599 4.85744 11.936 4.9837 12.6666 4.9837H13.8229L11.0162 2.17706V3.33331Z" fill="white"/></svg>');
}

.track-item__menu-item--remix::before {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.49024 2.65039C4.65766 2.64983 4.80229 2.76749 4.83496 2.93164V2.9336L4.84473 2.97754C4.85167 3.00887 4.86253 3.05497 4.87696 3.11231C4.90596 3.22757 4.94976 3.38633 5.00879 3.55957C5.13224 3.92185 5.30237 4.28907 5.50391 4.48926C5.70543 4.68942 6.07345 4.85752 6.43653 4.97852C6.61021 5.0364 6.76928 5.07919 6.88477 5.10742C6.94233 5.1215 6.9891 5.13194 7.02051 5.13867C7.036 5.14199 7.04801 5.14396 7.05567 5.14551C7.05922 5.14623 7.06178 5.14713 7.06348 5.14746H7.06543C7.23002 5.17882 7.34898 5.3227 7.34961 5.49024C7.35018 5.65783 7.2318 5.80151 7.06738 5.83399L7.06836 5.83496H7.06641L7.02246 5.84473C6.99114 5.85167 6.94504 5.86253 6.8877 5.87696C6.77244 5.90596 6.61368 5.94976 6.44043 6.00879C6.07815 6.13224 5.71093 6.30237 5.51074 6.50391C5.31058 6.70543 5.14249 7.07345 5.02149 7.43653C4.96361 7.61021 4.92081 7.76928 4.89258 7.88477C4.87851 7.94233 4.86807 7.9891 4.86133 8.02051C4.85801 8.036 4.85604 8.04801 4.85449 8.05567C4.85378 8.05922 4.85287 8.06178 4.85254 8.06348V8.06543C4.82118 8.23002 4.6773 8.34898 4.50977 8.34961C4.34217 8.35018 4.19752 8.2318 4.16504 8.06738V8.06641L4.15528 8.02246C4.14833 7.99114 4.13748 7.94504 4.12305 7.8877C4.09404 7.77244 4.05024 7.61368 3.99121 7.44043C3.86776 7.07815 3.69763 6.71093 3.4961 6.51074C3.29458 6.31058 2.92655 6.14249 2.56348 6.02149C2.38979 5.96361 2.23072 5.92082 2.11524 5.89258C2.05767 5.87851 2.0109 5.86807 1.97949 5.86133C1.96401 5.85801 1.95199 5.85604 1.94434 5.85449C1.94079 5.85378 1.93822 5.85287 1.93653 5.85254H1.93457C1.76998 5.82118 1.65102 5.6773 1.65039 5.50977C1.64983 5.34217 1.7682 5.19752 1.93262 5.16504H1.9336L1.97754 5.15528C2.00887 5.14833 2.05497 5.13748 2.11231 5.12305C2.22757 5.09404 2.38633 5.05024 2.55957 4.99121C2.92185 4.86776 3.28907 4.69763 3.48926 4.4961C3.68942 4.29458 3.85752 3.92655 3.97852 3.56348C4.0364 3.38979 4.07919 3.23072 4.10742 3.11524C4.1215 3.05767 4.13193 3.0109 4.13867 2.97949C4.14199 2.96401 4.14396 2.95199 4.14551 2.94434C4.14623 2.94079 4.14713 2.93822 4.14746 2.93653V2.93457C4.17882 2.76998 4.3227 2.65102 4.49024 2.65039ZM4.49512 4.17188C4.37126 4.46264 4.20521 4.76792 3.98535 4.98926C3.76554 5.21048 3.46168 5.37813 3.17188 5.50391C3.46275 5.62778 3.76783 5.79471 3.98926 6.01465C4.21027 6.23426 4.37817 6.5376 4.50391 6.82715C4.62775 6.53653 4.79492 6.23197 5.01465 6.01074C5.23435 5.78965 5.53749 5.62087 5.82715 5.49512C5.53664 5.3713 5.23188 5.205 5.01074 4.98535C4.78944 4.76545 4.62091 4.46179 4.49512 4.17188Z" fill="white"/><path d="M11.4873 5.65039C11.6546 5.64997 11.7984 5.76764 11.8311 5.93164L11.832 5.93262C11.8321 5.93315 11.8318 5.93439 11.832 5.93555C11.8326 5.93812 11.8339 5.94198 11.835 5.94727C11.8373 5.95859 11.8407 5.97651 11.8457 5.99902C11.8557 6.04402 11.8711 6.10981 11.8916 6.19141C11.9329 6.35552 11.9949 6.582 12.0791 6.8291C12.2529 7.33897 12.5009 7.87892 12.8076 8.18359C13.1143 8.48823 13.656 8.73205 14.167 8.90234C14.4147 8.98488 14.6413 9.04575 14.8057 9.08594C14.8876 9.10598 14.9539 9.12118 14.999 9.13086C15.0214 9.13566 15.0385 9.13932 15.0498 9.1416C15.0555 9.14275 15.0599 9.14304 15.0625 9.14356L15.0654 9.14453C15.2301 9.1759 15.349 9.31971 15.3496 9.48731C15.35 9.65477 15.2317 9.79958 15.0674 9.83203H15.0645C15.0619 9.83255 15.058 9.83386 15.0527 9.83496C15.0414 9.83733 15.0235 9.84071 15.001 9.8457C14.956 9.85568 14.8902 9.87107 14.8086 9.8916C14.6445 9.9329 14.418 9.9949 14.1709 10.0791C13.661 10.2529 13.1211 10.5009 12.8164 10.8076C12.5118 11.1143 12.268 11.656 12.0977 12.167C12.0151 12.4147 11.9543 12.6413 11.9141 12.8057C11.894 12.8876 11.8788 12.9539 11.8691 12.999C11.8643 13.0214 11.8607 13.0385 11.8584 13.0498C11.8573 13.0555 11.857 13.0599 11.8564 13.0625L11.8555 13.0654C11.8241 13.2301 11.6803 13.349 11.5127 13.3496C11.3454 13.35 11.2016 13.2324 11.1689 13.0684L11.168 13.0674C11.1679 13.0668 11.1682 13.0656 11.168 13.0645C11.1674 13.0619 11.1661 13.058 11.165 13.0527C11.1627 13.0414 11.1593 13.0235 11.1543 13.001C11.1443 12.956 11.1289 12.8902 11.1084 12.8086C11.0671 12.6445 11.0051 12.418 10.9209 12.1709C10.7471 11.661 10.4991 11.1211 10.1924 10.8164C9.88566 10.5118 9.34399 10.268 8.83301 10.0977C8.58534 10.0151 8.35872 9.95425 8.19434 9.91406C8.11236 9.89402 8.04608 9.87882 8.00098 9.86914C7.97861 9.86434 7.96149 9.86068 7.9502 9.8584C7.94453 9.85726 7.94012 9.85696 7.9375 9.85645L7.93457 9.85547C7.76994 9.8241 7.65096 9.68029 7.65039 9.5127C7.64997 9.34544 7.76764 9.20164 7.93164 9.16895L7.93262 9.16797C7.93315 9.16786 7.93439 9.16821 7.93555 9.16797C7.93812 9.16745 7.94198 9.16614 7.94727 9.16504C7.95859 9.16267 7.97651 9.15929 7.99902 9.1543C8.04402 9.14432 8.10981 9.12893 8.19141 9.1084C8.35552 9.0671 8.582 9.0051 8.8291 8.9209C9.33897 8.74715 9.87892 8.49913 10.1836 8.19238C10.4882 7.88566 10.732 7.34399 10.9023 6.83301C10.9849 6.58534 11.0457 6.35872 11.0859 6.19434C11.106 6.11236 11.1212 6.04608 11.1309 6.00098C11.1357 5.97861 11.1393 5.96149 11.1416 5.9502C11.1427 5.94453 11.143 5.94012 11.1436 5.9375L11.1445 5.93457L11.1611 5.875C11.2119 5.74187 11.3407 5.65089 11.4873 5.65039ZM11.4922 7.25586C11.3148 7.74284 11.0542 8.31048 10.6807 8.68652C10.3072 9.06243 9.74152 9.32621 9.25586 9.50684C9.74291 9.68421 10.3104 9.94575 10.6865 10.3193C11.0622 10.6926 11.3262 11.2577 11.5068 11.7432C11.6842 11.2563 11.946 10.6894 12.3193 10.3135C12.6927 9.93771 13.2576 9.67281 13.7432 9.49219C13.2564 9.31482 12.6893 9.05396 12.3135 8.68067C11.9375 8.30711 11.6728 7.74159 11.4922 7.25586Z" fill="white"/></svg>');
}

.track-item__menu-item--divide::before {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.98363 9.7098L7.23444 11.002C7.91789 12.5622 6.92816 14.9334 5.12289 15.0995C1.96556 15.3897 1.76319 10.1719 4.74724 9.57166C5.17985 9.48452 5.53339 9.5498 5.95449 9.64544L6.92604 7.90394L4.16921 3.06352C3.84869 2.46723 3.96048 1.77531 4.3734 1.25796C4.56032 1.02388 4.87235 0.665923 5.09411 1.0761L7.96909 6.04252L10.9607 0.950707C11.2576 0.668655 11.7511 1.45834 11.8471 1.70214C12.0044 2.10077 12.0283 2.54313 11.8599 2.94268L9.04456 7.87662L10.0391 9.60566C11.9204 8.9605 13.4806 10.8523 13.3673 12.6351C13.2934 13.7997 12.48 15.0202 11.2358 15.1049C9.17392 15.2452 7.99272 12.745 8.70192 11.0023L7.98363 9.7101V9.7098ZM4.79419 1.55883C4.49852 1.87094 4.38521 2.34973 4.57122 2.75141L9.21512 10.8559C9.2848 11.0581 9.04092 11.6043 9.01578 11.88C8.88006 13.3677 10.207 15.2251 11.795 14.423C13.7996 13.4108 12.6784 9.36126 10.3194 10.0656C10.0758 10.1382 9.90948 10.3416 9.70741 10.0884L4.79419 1.55883ZM8.76948 7.37627L11.3458 2.82184C11.4887 2.48484 11.4915 2.23224 11.3545 1.8925C11.317 1.7996 11.1716 1.46593 11.0922 1.65842L8.2984 6.55744C8.28083 6.61998 8.34172 6.70105 8.37201 6.76025C8.40231 6.81945 8.73586 7.39934 8.76979 7.37627H8.76948ZM7.25777 8.43677L7.19536 8.4556L6.16867 10.1777C5.98872 10.3079 5.81937 10.1443 5.64911 10.0948C3.20796 9.38433 2.1237 13.5316 4.22768 14.4585C5.93601 15.2115 7.20778 13.0841 6.8806 11.5573C6.83546 11.3462 6.75276 11.1753 6.68944 10.9743L7.68038 9.23982L7.25777 8.43647V8.43677Z" fill="white"/><path d="M7.96832 2.63368C8.06981 2.63095 8.1828 2.70108 8.21249 2.79915C8.24218 2.89721 8.24339 3.61161 8.21976 3.71848C8.16463 3.96561 7.79049 3.9896 7.72505 3.7118C7.69445 3.58216 7.69233 2.98617 7.71899 2.85319C7.74292 2.73357 7.84381 2.63672 7.96832 2.63368Z" fill="white"/><path d="M7.94672 1.10927C8.05427 1.095 8.1812 1.18153 8.21241 1.28415C8.24149 1.37948 8.24331 2.09661 8.21937 2.20348C8.16848 2.43149 7.79343 2.45456 7.72617 2.19558C7.69255 2.06594 7.69376 1.47907 7.7189 1.3385C7.74041 1.21857 7.82221 1.12597 7.94672 1.10958V1.10927Z" fill="white"/><path d="M8.15552 5.36674C8.05161 5.48028 7.85833 5.45326 7.77169 5.33152C7.68535 5.21007 7.69353 4.56734 7.71897 4.39883C7.76714 4.08187 8.16067 4.07974 8.21884 4.36817C8.24762 4.51177 8.24398 5.02396 8.22671 5.18002C8.22035 5.23588 8.19278 5.32636 8.15582 5.36674H8.15552Z" fill="white"/><path d="M10.6978 10.6264C11.5428 10.5114 12.2962 11.3545 12.3677 12.1493C12.5052 13.6841 10.8829 14.6678 9.85927 13.3905C9.13128 12.4821 9.42636 10.7995 10.6978 10.6264ZM10.7278 11.1708C10.0147 11.2825 9.8729 12.326 10.1556 12.8813C10.7221 13.9947 12.0093 13.4175 11.8763 12.2176C11.8145 11.6614 11.3283 11.0767 10.7281 11.1708H10.7278Z" fill="white"/><path d="M7.88555 7.59309C8.13882 7.54725 8.1882 7.94467 7.96735 7.98232C7.69985 8.02816 7.62411 7.64015 7.88555 7.59309Z" fill="white"/><path d="M4.92353 10.6272C5.85964 10.5081 6.48553 11.3376 6.48553 12.2096C6.48553 13.5485 5.02138 14.6342 3.97742 13.4978C3.14946 12.5961 3.67447 10.7859 4.92353 10.6275V10.6272ZM4.92232 11.1409C4.40003 11.2295 4.05982 11.933 4.08406 12.4209C4.13435 13.4258 5.18225 13.8539 5.75906 12.9492C6.20379 12.2521 5.88569 10.9772 4.92202 11.1409H4.92232Z" fill="white"/></svg>');
}

.track-item__menu-item--share::before {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.17159 6.58573C5.36686 6.78099 5.36686 7.09758 5.17159 7.29284L3.75738 8.70705C2.78107 9.68336 2.78107 11.2663 3.75738 12.2426C4.73369 13.2189 6.3166 13.2189 7.29291 12.2426L8.70713 10.8284C8.90239 10.6331 9.21897 10.6331 9.41423 10.8284C9.6095 11.0236 9.6095 11.3402 9.41423 11.5355L8.00002 12.9497C6.63319 14.3165 4.41711 14.3165 3.05027 12.9497C1.68344 11.5829 1.68344 9.36678 3.05027 7.99995L4.46449 6.58573C4.65975 6.39047 4.97633 6.39047 5.17159 6.58573Z" fill="white"/><path d="M8.13053 2.92659C9.50446 1.68495 11.6255 1.72598 12.9498 3.0502C14.3166 4.41703 14.3166 6.63311 12.9498 7.99995L11.5356 9.41416C11.3403 9.60942 11.0237 9.60942 10.8284 9.41416C10.6332 9.2189 10.6332 8.90231 10.8284 8.70705L12.2427 7.29284C13.219 6.31653 13.219 4.73362 12.2427 3.7573C11.2663 2.78099 9.68344 2.78099 8.70713 3.7573L7.29291 5.17152C7.09765 5.36678 6.78107 5.36678 6.58581 5.17152C6.39054 4.97626 6.39054 4.65967 6.58581 4.46441L8.00002 3.0502L8.13053 2.92659Z" fill="white"/><path d="M10.1213 5.17152C10.3166 4.97626 10.6332 4.97626 10.8284 5.17152C11.0237 5.36678 11.0237 5.68336 10.8284 5.87862L5.8787 10.8284C5.68344 11.0236 5.36686 11.0236 5.17159 10.8284C4.97633 10.6331 4.97633 10.3165 5.17159 10.1213L10.1213 5.17152Z" fill="white"/></svg>');
}

.track-item__menu-item:not(:last-child) {
  margin-bottom: 5px;
}

.track-item__menu-separator {
  display: block;
  margin: 8px 20px;
  width: calc(100% - 40px);
  height: 1px;
  background: #49494A;
}

.tracks-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: auto;
  display: none;
}

.tracks-navigation-prev,
.tracks-navigation-next {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #8f2d8e;
}

.tracks-navigation-prev:not(:last-child),
.tracks-navigation-next:not(:last-child) {
  margin-right: 8px;
}

@media screen and (max-width: 1024px) {
  .tracks-columns {
    position: relative;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0;
    margin-bottom: 40px;
  }

  .tracks-column {
    width: 100%;
    max-width: 100%;
  }

  .tracks-column:nth-child(2),
  .tracks-column:nth-child(3) {
    display: none;
  }

  .tracks-column__title {
    margin-bottom: 16px;
  }

  .tracks-column__list {
    gap: 12px;
  }

  .track-item__dropdown-menu {
    left: auto;
    right: 0;
    margin-top: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    min-width: 220px;
    border-radius: 20px;
  }

  .track-item__menu-item {
    padding: 5px 16px;
    min-height: 28px;
  }

  .track-item__menu-item::before {
    width: 14px;
    height: 14px;
    margin-right: 8px;
  }

  .track-item__menu-item span {
    font-size: 14px;
  }

  .track-item__menu-item:not(:last-child) {
    margin-bottom: 3px;
  }

  .track-item__menu-separator {
    margin: 6px 16px;
    width: calc(100% - 32px);
  }

  .tracks-navigation {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
  }
}

@media screen and (max-width: 1024px) {
  .tracks-column__title {
    font-size: 20px;
  }

  .tracks-column__list {
    gap: 8px;
  }

  .track-item__info {
    width: 100%;
  }

  .track-item__title {
    margin-top: 0;
    margin-bottom: 4px;
    margin-right: 6px;
    font-size: 14px;
  }

  .track-item__tag {
    margin-bottom: 4px;
    font-size: 10px;
    min-height: 20px;
    padding: 2px 6px 3px 6px;
  }

  .track-item__tag:not(:last-child) {
    margin-right: 4px;
  }

  .track-item__description {
    margin-top: 2px;
    margin-bottom: 8px;
    max-width: 100%;
  }

  .track-item__stats-item {
    margin-left: 12px;
  }

  .track-item__stats-item::before {
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }

  .track-item__remix-btn {
    display: none;
  }

  .tracks-navigation-prev,
  .tracks-navigation-next {
    width: 24px;
    height: 24px;
  }
}

.clips-section {
  width: 100%;
  max-width: 100%;
  margin-bottom: 60px;
}

.clips-section__slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow-x: visible;
  overflow-y: unset;
}

.clips-section__slider .swiper-wrapper {
  overflow-y: unset;
}

.clips-slider {
  position: relative;
  overflow-y: hidden;
  z-index: 0;
}

.clips-slider::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #101012 100%);
  z-index: 30;
}

.clips-slider__slide {
  width: 275px !important;
  min-width: 275px !important;
  overflow-y: unset;
}

.clips-slider__slide--active {
  z-index: 100 !important;
}

.clips-slider__slide--video-active {
  z-index: 20 !important;
}

.clips-slider__slide--video-active .clip-card__preview {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.clips-slider__slide--video-active .clip-card__image::after,
.clips-slider__slide--video-active .clip-card .clip-card__play-icon,
.clips-slider__slide--video-active .clip-card .clip-card__duration {
  opacity: 0 !important;
}

.clips-slider__slide--video-active .clip-card__video {
  display: block;
}

.clips-slider__navigation {
  position: absolute;
  top: -84px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 10;
}

.clip-card {
  background: transparent;
  border-radius: 16px;
  overflow: unset;
  transition: all 0.3s ease;
  z-index: 0;
  /* Лоадер для видео */
}

.clip-card__media {
  position: relative;
  width: 100%;
  height: 370px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  z-index: 0;
}

.clip-card__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform opacity 0.3s ease;
  position: relative;
  z-index: 2 !important;
}

.clip-card__image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.clip-card__image--hidden {
  opacity: 0;
  pointer-events: none;
}

.clip-card__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-size: 0;
  width: 80px;
  height: 80px;
  background-image: url('data:image/svg+xml,<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 63.2866V16.7134C17.5 12.7463 21.8987 10.3592 25.2249 12.5212L61.0504 35.8078C64.0838 37.7795 64.0838 42.2205 61.0504 44.1922L25.2249 67.4788C21.8987 69.6409 17.5 67.2538 17.5 63.2866Z" fill="white"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
  z-index: 3 !important;
  cursor: pointer;
}

.clip-card__play-icon--visible {
  opacity: 1;
  visibility: visible;
}

.clip-card__video {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1 !important;
}

.clip-card__duration {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  border-radius: 15px;
  background: #151517;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.clip-card__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4 !important;
}

.clip-card__loader--visible {
  display: block;
}

.clip-card__loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: video-loader-spin 1s linear infinite;
}

.clip-card__content {
  padding: 0 4px;
}

.clip-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.clip-card__title {
  margin: 0 8px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
  flex: 1;
}

.clip-card:hover .clip-card__image::after {
  opacity: 1;
}

.clip-card:hover .clip-card__play-icon,
.clip-card:hover .clip-card__duration {
  opacity: 1;
}

.clip-card__menu {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  margin-top: -2px;
  margin-right: -4px;
}

.clip-card__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 24px;
  height: 24px;
  color: #fff;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clip-card__menu-btn svg {
  display: block;
  width: 16px;
  height: auto;
}

.clip-card__menu-btn--open,
.clip-card__menu-btn:hover {
  background-color: #333335;
}

.clip-card__dropdown-menu {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: calc(100% + 6px);
  margin-top: 0;
  background: #333335;
  border-radius: 24px;
  padding: 12px 0;
  min-width: 184px;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 100;
}

.clip-card__dropdown-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.clip-card__menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 8px 16px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clip-card__menu-item::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 8px;
  opacity: 0.7;
}

.clip-card__menu-item span {
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: left;
  color: rgba(255, 255, 255, 0.7);
}

.clip-card__menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.clip-card__menu-item:hover::before {
  opacity: 1;
}

.clip-card__menu-item:hover span {
  color: #fff;
}

.clip-card__menu-item--remix::before {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.49024 2.65039C4.65766 2.64983 4.80229 2.76749 4.83496 2.93164V2.9336L4.84473 2.97754C4.85167 3.00887 4.86253 3.05497 4.87696 3.11231C4.90596 3.22757 4.94976 3.38633 5.00879 3.55957C5.13224 3.92185 5.30237 4.28907 5.50391 4.48926C5.70543 4.68942 6.07345 4.85752 6.43653 4.97852C6.61021 5.0364 6.76928 5.07919 6.88477 5.10742C6.94233 5.1215 6.9891 5.13194 7.02051 5.13867C7.036 5.14199 7.04801 5.14396 7.05567 5.14551C7.05922 5.14623 7.06178 5.14713 7.06348 5.14746H7.06543C7.23002 5.17882 7.34898 5.3227 7.34961 5.49024C7.35018 5.65783 7.2318 5.80151 7.06738 5.83399L7.06836 5.83496H7.06641L7.02246 5.84473C6.99114 5.85167 6.94504 5.86253 6.8877 5.87696C6.77244 5.90596 6.61368 5.94976 6.44043 6.00879C6.07815 6.13224 5.71093 6.30237 5.51074 6.50391C5.31058 6.70543 5.14249 7.07345 5.02149 7.43653C4.96361 7.61021 4.92081 7.76928 4.89258 7.88477C4.87851 7.94233 4.86807 7.9891 4.86133 8.02051C4.85801 8.036 4.85604 8.04801 4.85449 8.05567C4.85378 8.05922 4.85287 8.06178 4.85254 8.06348V8.06543C4.82118 8.23002 4.6773 8.34898 4.50977 8.34961C4.34217 8.35018 4.19752 8.2318 4.16504 8.06738V8.06641L4.15528 8.02246C4.14833 7.99114 4.13748 7.94504 4.12305 7.8877C4.09404 7.77244 4.05024 7.61368 3.99121 7.44043C3.86776 7.07815 3.69763 6.71093 3.4961 6.51074C3.29458 6.31058 2.92655 6.14249 2.56348 6.02149C2.38979 5.96361 2.23072 5.92082 2.11524 5.89258C2.05767 5.87851 2.0109 5.86807 1.97949 5.86133C1.96401 5.85801 1.95199 5.85604 1.94434 5.85449C1.94079 5.85378 1.93822 5.85287 1.93653 5.85254H1.93457C1.76998 5.82118 1.65102 5.6773 1.65039 5.50977C1.64983 5.34217 1.7682 5.19752 1.93262 5.16504H1.9336L1.97754 5.15528C2.00887 5.14833 2.05497 5.13748 2.11231 5.12305C2.22757 5.09404 2.38633 5.05024 2.55957 4.99121C2.92185 4.86776 3.28907 4.69763 3.48926 4.4961C3.68942 4.29458 3.85752 3.92655 3.97852 3.56348C4.0364 3.38979 4.07919 3.23072 4.10742 3.11524C4.1215 3.05767 4.13193 3.0109 4.13867 2.97949C4.14199 2.96401 4.14396 2.95199 4.14551 2.94434C4.14623 2.94079 4.14713 2.93822 4.14746 2.93653V2.93457C4.17882 2.76998 4.3227 2.65102 4.49024 2.65039ZM4.49512 4.17188C4.37126 4.46264 4.20521 4.76792 3.98535 4.98926C3.76554 5.21048 3.46168 5.37813 3.17188 5.50391C3.46275 5.62778 3.76783 5.79471 3.98926 6.01465C4.21027 6.23426 4.37817 6.5376 4.50391 6.82715C4.62775 6.53653 4.79492 6.23197 5.01465 6.01074C5.23435 5.78965 5.53749 5.62087 5.82715 5.49512C5.53664 5.3713 5.23188 5.205 5.01074 4.98535C4.78944 4.76545 4.62091 4.46179 4.49512 4.17188Z" fill="white"/><path d="M11.4873 5.65039C11.6546 5.64997 11.7984 5.76764 11.8311 5.93164L11.832 5.93262C11.8321 5.93315 11.8318 5.93439 11.832 5.93555C11.8326 5.93812 11.8339 5.94198 11.835 5.94727C11.8373 5.95859 11.8407 5.97651 11.8457 5.99902C11.8557 6.04402 11.8711 6.10981 11.8916 6.19141C11.9329 6.35552 11.9949 6.582 12.0791 6.8291C12.2529 7.33897 12.5009 7.87892 12.8076 8.18359C13.1143 8.48823 13.656 8.73205 14.167 8.90234C14.4147 8.98488 14.6413 9.04575 14.8057 9.08594C14.8876 9.10598 14.9539 9.12118 14.999 9.13086C15.0214 9.13566 15.0385 9.13932 15.0498 9.1416C15.0555 9.14275 15.0599 9.14304 15.0625 9.14356L15.0654 9.14453C15.2301 9.1759 15.349 9.31971 15.3496 9.48731C15.35 9.65477 15.2317 9.79958 15.0674 9.83203H15.0645C15.0619 9.83255 15.058 9.83386 15.0527 9.83496C15.0414 9.83733 15.0235 9.84071 15.001 9.8457C14.956 9.85568 14.8902 9.87107 14.8086 9.8916C14.6445 9.9329 14.418 9.9949 14.1709 10.0791C13.661 10.2529 13.1211 10.5009 12.8164 10.8076C12.5118 11.1143 12.268 11.656 12.0977 12.167C12.0151 12.4147 11.9543 12.6413 11.9141 12.8057C11.894 12.8876 11.8788 12.9539 11.8691 12.999C11.8643 13.0214 11.8607 13.0385 11.8584 13.0498C11.8573 13.0555 11.857 13.0599 11.8564 13.0625L11.8555 13.0654C11.8241 13.2301 11.6803 13.349 11.5127 13.3496C11.3454 13.35 11.2016 13.2324 11.1689 13.0684L11.168 13.0674C11.1679 13.0668 11.1682 13.0656 11.168 13.0645C11.1674 13.0619 11.1661 13.058 11.165 13.0527C11.1627 13.0414 11.1593 13.0235 11.1543 13.001C11.1443 12.956 11.1289 12.8902 11.1084 12.8086C11.0671 12.6445 11.0051 12.418 10.9209 12.1709C10.7471 11.661 10.4991 11.1211 10.1924 10.8164C9.88566 10.5118 9.34399 10.268 8.83301 10.0977C8.58534 10.0151 8.35872 9.95425 8.19434 9.91406C8.11236 9.89402 8.04608 9.87882 8.00098 9.86914C7.97861 9.86434 7.96149 9.86068 7.9502 9.8584C7.94453 9.85726 7.94012 9.85696 7.9375 9.85645L7.93457 9.85547C7.76994 9.8241 7.65096 9.68029 7.65039 9.5127C7.64997 9.34544 7.76764 9.20164 7.93164 9.16895L7.93262 9.16797C7.93315 9.16786 7.93439 9.16821 7.93555 9.16797C7.93812 9.16745 7.94198 9.16614 7.94727 9.16504C7.95859 9.16267 7.97651 9.15929 7.99902 9.1543C8.04402 9.14432 8.10981 9.12893 8.19141 9.1084C8.35552 9.0671 8.582 9.0051 8.8291 8.9209C9.33897 8.74715 9.87892 8.49913 10.1836 8.19238C10.4882 7.88566 10.732 7.34399 10.9023 6.83301C10.9849 6.58534 11.0457 6.35872 11.0859 6.19434C11.106 6.11236 11.1212 6.04608 11.1309 6.00098C11.1357 5.97861 11.1393 5.96149 11.1416 5.9502C11.1427 5.94453 11.143 5.94012 11.1436 5.9375L11.1445 5.93457L11.1611 5.875C11.2119 5.74187 11.3407 5.65089 11.4873 5.65039ZM11.4922 7.25586C11.3148 7.74284 11.0542 8.31048 10.6807 8.68652C10.3072 9.06243 9.74152 9.32621 9.25586 9.50684C9.74291 9.68421 10.3104 9.94575 10.6865 10.3193C11.0622 10.6926 11.3262 11.2577 11.5068 11.7432C11.6842 11.2563 11.946 10.6894 12.3193 10.3135C12.6927 9.93771 13.2576 9.67281 13.7432 9.49219C13.2564 9.31482 12.6893 9.05396 12.3135 8.68067C11.9375 8.30711 11.6728 7.74159 11.4922 7.25586Z" fill="white"/></svg>');
}

.clip-card__menu-item--share::before {
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.17159 6.58573C5.36686 6.78099 5.36686 7.09758 5.17159 7.29284L3.75738 8.70705C2.78107 9.68336 2.78107 11.2663 3.75738 12.2426C4.73369 13.2189 6.3166 13.2189 7.29291 12.2426L8.70713 10.8284C8.90239 10.6331 9.21897 10.6331 9.41423 10.8284C9.6095 11.0236 9.6095 11.3402 9.41423 11.5355L8.00002 12.9497C6.63319 14.3165 4.41711 14.3165 3.05027 12.9497C1.68344 11.5829 1.68344 9.36678 3.05027 7.99995L4.46449 6.58573C4.65975 6.39047 4.97633 6.39047 5.17159 6.58573Z" fill="white"/><path d="M8.13053 2.92659C9.50446 1.68495 11.6255 1.72598 12.9498 3.0502C14.3166 4.41703 14.3166 6.63311 12.9498 7.99995L11.5356 9.41416C11.3403 9.60942 11.0237 9.60942 10.8284 9.41416C10.6332 9.2189 10.6332 8.90231 10.8284 8.70705L12.2427 7.29284C13.219 6.31653 13.219 4.73362 12.2427 3.7573C11.2663 2.78099 9.68344 2.78099 8.70713 3.7573L7.29291 5.17152C7.09765 5.36678 6.78107 5.36678 6.58581 5.17152C6.39054 4.97626 6.39054 4.65967 6.58581 4.46441L8.00002 3.0502L8.13053 2.92659Z" fill="white"/><path d="M10.1213 5.17152C10.3166 4.97626 10.6332 4.97626 10.8284 5.17152C11.0237 5.36678 11.0237 5.68336 10.8284 5.87862L5.8787 10.8284C5.68344 11.0236 5.36686 11.0236 5.17159 10.8284C4.97633 10.6331 4.97633 10.3165 5.17159 10.1213L10.1213 5.17152Z" fill="white"/></svg>');
}

.clip-card__menu-item:not(:last-child) {
  margin-bottom: 5px;
}

.clip-card__menu-separator {
  display: block;
  margin: 8px 20px;
  width: calc(100% - 40px);
  height: 1px;
  background: #49494A;
}

.clip-card__author {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.clip-card__author-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 4px;
}

.clip-card__author-name {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #C9C9CB;
}

/* ОЧЕНЬ ВАЖНО: правильные z-index */
/* Когда видео активно, поднимаем его над постером */
.clips-slider__slide--video-active .clip-card__video {
  z-index: 5 !important;
}

/* Скрываем постер при активном видео */
.clips-slider__slide--video-active .clip-card__image {
  opacity: 0;
  pointer-events: none;
  z-index: 0 !important;
}

/* На десктопе скрываем по умолчанию, показываем на hover */
@media (min-width: 1025px) {
  .clip-card:not(:hover) .clip-card__play-icon {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes video-loader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 1024px) {
  .clips-section {
    margin-bottom: 40px;
  }

  .clips-slider__navigation {
    top: -76px;
  }

  .clip-card__play-icon {
    opacity: 1;
    visibility: visible;
  }

  .clip-card__dropdown-menu {
    top: auto;
    left: auto;
    bottom: 100%;
    right: 0;
    margin-top: 0;
    margin-bottom: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 20px;
  }

  .clip-card__menu-item {
    padding: 5px 16px;
    min-height: 28px;
  }

  .clip-card__menu-item::before {
    width: 14px;
    height: 14px;
    margin-right: 8px;
  }

  .clip-card__menu-item span {
    font-size: 14px;
  }

  .clip-card__menu-item:not(:last-child) {
    margin-bottom: 3px;
  }

  .clip-card__menu-separator {
    margin: 6px 16px;
    width: calc(100% - 32px);
  }
}

@media screen and (max-width: 1024px) {
  .clips-section__slider {
    overflow-x: unset !important;
  }

  .clips-section__slider .swiper-wrapper {
    overflow-x: unset !important;
  }

  .clips-slider {
    overflow: unset !important;
  }

  .clips-slider::before {
    right: -16px;
    width: 30px;
  }

  .clips-slider__slide {
    width: 260px !important;
    min-width: 260px !important;
  }

  .clips-slider__navigation {
    display: none;
  }

  .clip-card__media {
    height: 360px;
    margin-bottom: 10px;
  }

  .clip-card__play-icon {
    width: 60px;
    height: 60px;
  }

  .clip-card__header {
    margin-bottom: 4px;
  }

  .clip-card__title {
    margin-bottom: 4px;
    font-size: 14px;
  }
}

.masonry {
  position: relative;
  z-index: 0;
  /* Лоадер для masonry */
}

.masonry::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  aspect-ratio: 1600/300;
  background: linear-gradient(to bottom, transparent, rgb(16, 16, 18) 80%);
  pointer-events: none;
  z-index: 1;
}

.masonry-item {
  border-radius: 16px;
  display: inline-block;
  margin: 5px;
  overflow: hidden;
  position: absolute;
  /* Кнопка play */
}

.masonry-item:hover .masonry-item__play-icon {
  opacity: 1;
  visibility: visible;
}

.masonry-item__overlay {
  background: rgba(0, 0, 0, 0.3);
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  transition: all 0.4s ease;
  z-index: 2;
}

.masonry-item:hover .masonry-item__overlay {
  opacity: 1;
}

.masonry-item--video-active .masonry-item__overlay {
  opacity: 1;
}

.masonry-item__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-size: 0;
  width: 80px;
  height: 80px;
  background-image: url('data:image/svg+xml,<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 63.2866V16.7134C17.5 12.7463 21.8987 10.3592 25.2249 12.5212L61.0504 35.8078C64.0838 37.7795 64.0838 42.2205 61.0504 44.1922L25.2249 67.4788C21.8987 69.6409 17.5 67.2538 17.5 63.2866Z" fill="white"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  border: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10 !important;
  cursor: pointer;
  /* Кнопка должна быть вне overlay по z-index */
}

.masonry-item__play-icon--visible {
  opacity: 1;
  visibility: visible;
}

.masonry-item__tag {
  margin: 12px 0 0 12px;
  font-size: 12px;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: #C9C9CB;
  background: #151517;
  border-radius: 24px;
  color: #fff;
  display: inline-block;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  padding: 3px 8px;
  z-index: 11;
}

.masonry-item__tag-icon {
  vertical-align: middle;
  width: 12px;
  height: 12px;
}

.masonry-item__action {
  position: relative;
  z-index: 11;
  text-align: center;
}

.masonry-item__btn:hover {
  text-decoration: none;
}

.masonry-item__btn {
  border-radius: 32px;
  text-decoration: none;
  height: 28px;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.005em;
  padding: 2px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%);
  transition: all 0.5s ease;
}

.masonry-item__btn img {
  margin-left: 4px;
  vertical-align: middle;
}

.masonry-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.masonry-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.masonry .masonry-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  display: none;
}

.masonry .masonry-loader--visible {
  display: block;
}

.masonry .masonry-loader__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: masonry-loader-spin 1s linear infinite;
}

@keyframes masonry-loader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* На мобильных кнопка всегда видна */
@media screen and (max-width: 1024px) {
  .masonry-item__play-icon {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Состояния при активном видео */
.masonry-item--video-active .masonry-video {
  z-index: 3;
  opacity: 1;
}

.masonry-item--video-active .masonry-image {
  opacity: 0 !important;
  pointer-events: none;
  z-index: 0;
}

.masonry-item--video-active .masonry-item__overlay {
  opacity: 1;
  z-index: 4;
}

.masonry-item--video-active .masonry-item__play-icon {
  display: none !important;
}

/* Улучшенные стили для hover на десктопе */
@media (min-width: 768px) {
  .masonry-item:hover .masonry-item__play-icon {
    opacity: 1;
    visibility: visible;
  }

  .masonry-item:hover .masonry-item__overlay {
    opacity: 1;
  }
}

/* Убедимся, что кнопка видна на мобильных */
@media (max-width: 767px) {
  .masonry-item__play-icon {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media screen and (max-width: 1024px) {
  .masonry-item__play-icon {
    opacity: 1;
    visibility: visible;
  }
}

@media screen and (max-width: 576px) {
  .masonry-item__play-icon {
    width: 60px;
    height: 60px;
  }
}

.capable-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 100%;
}

.capable-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
  text-decoration: none !important;
  border-radius: 20px;
  background: linear-gradient(277.5deg, #1F1F21 0%, #151517 95.74%);
}

.capable-item::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  display: block;
  background-image: url(https://veosuno.ru/images/capable-item-gradient.svg);
  background-size: cover;
  opacity: 0;
  transition: all 0.6s ease;
}

.capable-item-text-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
  width: 100%;
  z-index: 1;
  margin-bottom: 20px;
}

.capable-item-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
}

.capable-item-title-block {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  gap: 4px 12px;
}

.capable-item-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  min-height: 24px;
  font-size: 14px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  border-radius: 100px;
  background-color: #333335;
  transition: all 0.3s ease;
}

.capable-item-description {
  margin-top: 10px;
  margin-bottom: 0;
  max-width: 240px;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #8D8D8F;
}

.capable-item-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 20px;
  min-height: 34px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border-radius: 100px;
  background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%);
  transition: all 0.5s ease;
  opacity: 0;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(222, 100, 43, 0.3);
}

.capable-item-image {
  filter: grayscale(1);
  height: 100%;
  opacity: 0.3;
  transition: all 0.6s ease;
  position: absolute;
  right: 0;
  top: 0;
}

.capable-item:hover::before,
.capable-item:hover .capable-item-button {
  opacity: 1;
}

.capable-item:hover .capable-item-image {
  filter: grayscale(0);
  opacity: 1;
}

.capable-item:hover .capable-item-tag {
  background-color: #DE762B;
}

@media screen and (max-width: 1440px) {
  .capable-grid {
    gap: 12px;
  }

  .capable-item {
    padding: 16px;
    min-height: 180px;
  }

  .capable-item-text-wrap {
    margin-bottom: 16px;
  }

  .capable-item-title {
    font-size: 18px;
  }

  .capable-item-title-block {
    gap: 2px 8px;
  }

  .capable-item-tag {
    padding: 3px 8px;
    min-height: 22px;
    font-size: 12px;
  }

  .capable-item-description {
    margin-top: 8px;
    max-width: 200px;
    font-size: 14px;
  }

  .capable-item-button {
    padding: 4px 16px;
    min-height: 30px;
    font-size: 15px;
  }
}

@media screen and (max-width: 1024px) {
  .capable-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .capable-item::before,
  .capable-item-button {
    opacity: 1;
  }

  .capable-item-image {
    filter: grayscale(0);
    opacity: 1;
  }
}

@media screen and (max-width: 576px) {
  .capable-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .capable-item {
    min-height: 130px;
  }

  .capable-item-title-block {
    gap: 1px 6px;
  }

  .capable-item-description {
    max-width: 60%;
  }

  .capable-item-button {
    display: none;
  }
}

.blog-section__slider {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.blog-slider {
  position: relative;
}

.blog-slider__navigation {
  position: absolute;
  top: -52px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 10;
}

.blog-card {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none !important;
  background-color: #101012;
  transition: all 0.3s ease;
}

.blog-card__image {
  position: relative;
  width: 55%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 0;
}

.blog-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 8px;
  padding-left: 12px;
  width: 45%;
}

.blog-card__header {
  width: 100%;
  margin-bottom: 12px;
}

.blog-card__title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.blog-card__meta-item {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #8D8D8F;
}

.blog-card__meta-item:not(:last-child) {
  margin-bottom: 6px;
}

.blog-card:hover {
  background-color: #1F1F21;
}

@media screen and (max-width: 1024px) {
  .blog-slider__navigation {
    top: -48px;
  }

  .blog-card__image {
    border-radius: 8px;
  }

  .blog-card__title {
    font-size: 16px;
  }
}

@media screen and (max-width: 576px) {
  .blog-slider__navigation {
    top: -40px;
  }

  .blog-card__image {
    width: 50%;
    height: 140px;
  }

  .blog-card__content {
    padding-right: 4px;
    padding-left: 10px;
    width: 50%;
  }

  .blog-card__title {
    -webkit-line-clamp: 4;
  }

  .blog-card__meta-item:not(:last-child) {
    margin-bottom: 3px;
  }
}

.reviews-section__slider {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.reviews-slider {
  position: relative;
}

.reviews-slider__navigation {
  position: absolute;
  top: -52px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 10;
}

.reviews-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: 24px;
  border-radius: 24px;
  text-decoration: none !important;
  background-color: #151517;
  transition: all 0.3s ease;
}

.reviews-card__author {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.reviews-card__author-icon {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-right: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.reviews-card__author-name {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #fff;
}

.reviews-card__content {
  width: 100%;
}

.reviews-card__content p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.3;
  color: #8D8D8F;
}

.reviews-card__content p:not(:last-child) {
  margin-bottom: 12px;
}

@media screen and (max-width: 1024px) {
  .reviews-slider__navigation {
    top: -48px;
  }

  .reviews-card {
    padding: 20px;
    border-radius: 20px;
  }

  .reviews-card__author {
    margin-bottom: 20px;
  }

  .reviews-card__author-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
  }

  .reviews-card__author-name {
    font-size: 16px;
  }

  .reviews-card__content p {
    font-size: 16px;
  }

  .reviews-card__content p:not(:last-child) {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 576px) {
  .reviews-slider__navigation {
    top: -40px;
  }

  .reviews-card {
    padding: 16px;
    border-radius: 16px;
  }

  .reviews-card__author {
    margin-bottom: 16px;
  }

  .reviews-card__content p {
    font-size: 15px;
  }
}

.faq-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 0;
}

.faq-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: -200px;
  width: 1080px;
  height: 1010px;
  background-image: url("https://veosuno.ru/images/faq-section-bg.webp");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

.faq-section .section-heading {
  width: 520px;
  margin-right: 20px;
}

.faq-accordion {
  width: calc(100% - 540px);
  max-width: 100%;
}

.faq-accordion-item {
  width: 100%;
  padding: 28px;
  border-radius: 24px;
  box-sizing: border-box;
  background: #151517;
}

.faq-accordion-item:not(:last-child) {
  margin-bottom: 16px;
}

.faq-accordion-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  transition: all 0.3s ease;
  cursor: pointer;
}

.faq-accordion-header h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  transition: all 0.3s ease;
}

@media screen and (min-width: 1025px) {
  .faq-accordion-header:hover h3 {
    color: #DE762B;
  }
}

.faq-accordion-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 12px;
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.5303 9.96967C18.8232 10.2626 18.8232 10.7373 18.5303 11.0302L12.5303 17.0302C12.3897 17.1709 12.199 17.2499 12.0001 17.2499C11.8011 17.2499 11.6104 17.1709 11.4698 17.0302L5.46978 11.0302C5.17689 10.7373 5.17689 10.2626 5.46978 9.96967C5.76268 9.67678 6.23744 9.67678 6.53033 9.96967L12.0001 15.4394L17.4698 9.96967C17.7627 9.67678 18.2374 9.67678 18.5303 9.96967Z" fill="white"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.3s ease;
}

.faq-accordion-content {
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 16px;
  background: #1F1F21;
  box-sizing: border-box;
  overflow: hidden;
  height: 0;
  transition: all 0.25s ease;
}

.faq-accordion-content>p,
.faq-accordion-content>ul,
.faq-accordion-content>ol {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.3;
  color: #C9C9CB;
}

.faq-accordion-open .faq-accordion-button {
  transform: rotate(-180deg);
}

.faq-accordion-open .faq-accordion-content {
  margin-top: 20px;
}

@media screen and (max-width: 1440px) {
  .faq-section::before {
    left: -40px;
    width: 640px;
    height: 600px;
  }

  .faq-section .section-heading {
    width: 300px;
  }

  .faq-accordion {
    width: calc(100% - 320px);
  }
}

@media screen and (max-width: 1024px) {
  .faq-section {
    justify-content: flex-start;
    flex-direction: column;
  }

  .faq-section .section-heading {
    width: 100%;
  }

  .faq-accordion {
    width: 100%;
  }

  .faq-accordion-item {
    padding: 20px;
    border-radius: 16px;
  }

  .faq-accordion-item:not(:last-child) {
    margin-bottom: 12px;
  }

  .faq-accordion-header h3 {
    font-size: 16px;
  }

  .faq-accordion-button {
    margin-left: 8px;
    width: 20px;
    height: 20px;
  }

  .faq-accordion-content {
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 12px;
  }

  .faq-accordion-content>p,
  .faq-accordion-content>ul,
  .faq-accordion-content>ol {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    font-size: 15px;
  }

  .faq-accordion-open .faq-accordion-content {
    margin-top: 14px;
  }
}



@media screen and (max-width: 576px) {
  .faq-section::before {
    width: 380px;
    height: 360px;
  }

  .faq-accordion-item {
    padding: 16px;
    border-radius: 12px;
  }

  .faq-accordion-item:not(:last-child) {
    margin-bottom: 8px;
  }

  .faq-accordion-header h3 {
    font-size: 15px;
  }

  .faq-accordion-button {
    margin-left: 4px;
    width: 16px;
    height: 16px;
  }

  .faq-accordion-content {
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
  }

  .faq-accordion-content>p,
  .faq-accordion-content>ul,
  .faq-accordion-content>ol {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    font-size: 14px;
  }

  .faq-accordion-open .faq-accordion-content {
    margin-top: 10px;
  }
}