#collections_theme--wrapper {
    margin: auto;
    background: var(--cover);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.collections_theme--about-wrapper {
    background:
		var(--noise),
		url(https://forumstatic.ru/files/001c/11/e3/60912.png) no-repeat top left,
		url(https://forumstatic.ru/files/001c/11/e3/11625.png) no-repeat 100% 100%,
		#151515 url(https://forumstatic.ru/files/001c/11/e3/23277.png) no-repeat center left;
	background-blend-mode: hard-light, normal, normal, normal, normal;
    padding: 15px;
    border-radius: 10px;
    align-self: flex-start;
    flex: 1;
}

.collections_theme--about-wrapper a {
    color: var(--yellow-accent) !important;
}

.collections_theme--about-wrapper a:hover {
    color: var(--accent) !important;
}

.collections_theme--about-inner {
    background: rgba(230, 230, 225, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.11);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	border-radius: 10px;
    padding: 15px;
    display: flex;
    gap: 15px;
    flex-direction: column;
    color: var(--text3);
	text-shadow: 1px 1px 0 rgba(0,0,0,.25);
}

.collections_theme-list-title {
    font: 500 16px var(--font2);
    text-transform: lowercase;
    margin-bottom: -10px;
}

.collections_theme-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 !important;
}

.collections_theme-list li {
    list-style-type: disc !important;
    list-style-position: inside !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11px
}

.collections_theme-spoiler {
    background: var(--pun);
    border-radius: 10px;
}

.collections_theme-spoiler-title {
    font: 600 14px var(--font);
    text-transform: uppercase;
    padding: 10px 15px;
    display: flex;
    gap: 10px;
    cursor: pointer;
    align-items: center;
}

.collections_theme-spoiler-title::before {
    content: "\f107";
    font: normal 14px FontAwesome;
    transition: all .5s ease-in-out 0s;
}

.collections_theme-spoiler-title.open::before {
    transform: rotate(180deg)
}

.collections_theme-spoiler-inner {
    padding: 0 15px 15px;
    display: none;
}

.collection--box {
    background: var(--cover);
    border: 1px solid var(--borders);
    padding: 12px 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

.collection--title {
    font: 600 14px var(--font);
    text-transform: lowercase;
    align-self: center;
}

.collection--cards-list {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 !important;
    margin: 0 !important;
}

.collection--card {
    width: 150px;
    height: 260px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    background: #202020;
    padding: 11px 11px 25px !important;
    box-sizing: border-box;
    box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.5);
    transition: all ease 0.28s 0.01s;
    transform: perspective(222px) translate3d(0px, 5px, 0px) rotateX(0deg);
    perspective-origin: top;
    margin: 0 !important;
}

.collection--card::before {
    width: 100%;
    height: 172%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    transform: translateY(-36%);
    opacity: 0.25;
    transition: all ease 0.28s 0.01s;
    z-index: 2;
    pointer-events: none;
}

.collection--card::after {
    content: "";
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    top: 5px;
    left: 5px;
    box-sizing: border-box;
    border-radius: 8px;
    pointer-events: none;
}

.collection--card:hover,
.collection--card:focus {
    transform: perspective(222px) translate3d(0px, 0px, 8px) rotateX(3deg);
    transform-origin: center;
    box-shadow: 0 14px 16px -2px rgba(0, 0, 0, 0.5);
}

.collection--card:hover::before,
.collection--card:focus::before {
    opacity: .65;
    transform: translateY(-20%);
}

.card-item {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    border-radius: 6px;
}

.card-item::before {
    content: attr(data-duplicate);
    position: absolute;
    color: var(--text3);
    left: 0;
    width: 14px;
    height: 9px;
    left: 50%;
    transform: translateX(-50%);
    top: 1px;
    padding: 0 10px;
    z-index: 1;
    background: #202020;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 300 7px var(--font);
}

.card-item::after {
    content: attr(data-rank);
    position: absolute;
    color: var(--text3);
    width: auto;
    padding: 2px 10px;
    height: 14px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    z-index: 1;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 10px var(--font);
    border: none !important;
}

.card-title {
    background: #202020;
    width: calc(100% - 10px);
    height: auto;
    position: absolute;
    text-transform: uppercase;
    font: 300 10px var(--font);
    padding: 5px 10px 25px;
    left: 5px;
    bottom: 0px;
    color: var(--pun);
    text-align: center;
    transition: all .3s cubic-bezier(.64, .51, .55, 1.16) 0s;
    transform: translateY(100%);
    opacity: 0;
    box-sizing: border-box
}

.card-item:hover .card-title {
    transform: translateY(0%);
    opacity: 1;
}

.collection--box + .collection--box {
    margin-top: 15px;
}

.casual-card::before {
background-image: linear-gradient(
    35deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.08) 15%,
    rgba(100, 100, 100, 0.25) 25%,
    rgba(150, 150, 150, 0.4) 35%,
    rgba(200, 200, 200, 0.6) 45%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(200, 200, 200, 0.6) 55%,
    rgba(150, 150, 150, 0.4) 65%,
    rgba(100, 100, 100, 0.25) 75%,
    rgba(0, 0, 0, 0.08) 85%,
    rgba(0, 0, 0, 0.15) 100%
);
}

.casual-card::after {
    border: 1px solid #565656;
}

.casual-card .card-item::after {
    border: 1px solid #565656;
}

.casual-card .card-item::after {
    color: #959595
}

.epic-card::before {
background-image: linear-gradient(
    35deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.08) 15%,
    rgba(80, 120, 255, 0.25) 25%,
    rgba(120, 180, 255, 0.4) 35%,
    rgba(200, 220, 255, 0.6) 45%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(200, 220, 255, 0.6) 55%,
    rgba(120, 180, 255, 0.4) 65%,
    rgba(80, 120, 255, 0.25) 75%,
    rgba(0, 0, 0, 0.08) 85%,
    rgba(0, 0, 0, 0.15) 100%
);
}

.epic-card::after {
    border: 1px solid #326FA4;
}

.epic-card .card-item::after {
    border: 1px solid #326FA4;
}

.epic-card .card-item::after {
    color: #3F8BD6
}

.legend-card::before {
    background-image: linear-gradient(
    35deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(80, 60, 0, 0.1) 15%,
    rgba(180, 150, 50, 0.3) 25%,
    rgba(220, 180, 70, 0.5) 35%,
    rgba(255, 215, 120, 0.7) 45%,
    rgba(255, 230, 150, 0.9) 50%,
    rgba(255, 215, 120, 0.7) 55%,
    rgba(220, 180, 70, 0.5) 65%,
    rgba(180, 150, 50, 0.3) 75%,
    rgba(80, 60, 0, 0.1) 85%,
    rgba(0, 0, 0, 0.15) 100%
);
}

.legend-card::after {
    border: 1px solid #CFB53B;
}

.legend-card .card-item::after {
    border: 1px solid #CFB53B;
}

.legend-card .card-item::after {
    color: #CFB53B
}

.elite-card::before {
background-image: linear-gradient(
    35deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(100, 20, 0, 0.1) 15%,
    rgba(180, 50, 20, 0.3) 25%,
    rgba(220, 70, 30, 0.5) 35%,
    rgba(255, 120, 60, 0.7) 45%,
    rgba(255, 160, 100, 0.9) 50%,
    rgba(255, 120, 60, 0.7) 55%,
    rgba(220, 70, 30, 0.5) 65%,
    rgba(180, 50, 20, 0.3) 75%,
    rgba(100, 20, 0, 0.1) 85%,
    rgba(0, 0, 0, 0.15) 100%
);
}

.elite-card::after {
    border: 1px solid #E25822;
}

.elite-card .card-item::after {
    border: 1px solid #E25822;
}

.elite-card .card-item::after {
    color: #E25822
}

.elite-card .card-item::before {
    display: none;
}