@font-face {
    font-family: 'Russo One';
    src: url('../fonts/Russo-One/RussoOne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poiret One';
    src: url('../fonts/Poiret-One/PoiretOne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ruslan Display';
    src: url('../fonts/Ruslan-Display/RuslanDisplay.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --main-light: #FFFFFF;
    --main-dark: #292D32;

    --font-face-Russo-One: 'Russo One', sans-serif;
    --font-face-Poiret-One: 'Poiret One', sans-serif;
    --font-face-Ruslan-Display: 'Ruslan Display', sans-serif;

    --border-radius-gallery: 10px;

    --padding-main-gallery: clamp(16px, 3.33vw, 64px);

    --gap-main: clamp(20px, 5.2vw, 100px);
    --gap-submain: clamp(15px, 2.6vw, 50px);
    --gap-supp: 10px;

    --transition: 0.2s ease;
}

body {
    background-color: var(--main-light);
    font-family: var(--font-face-Russo-One);
    color: var(--main-light);
    line-height: normal;
    font-style: normal;
}

section {
    padding: var(--padding-main-gallery);
}

.head-hr {
    border: none;
    height: 0.26vw;
    background: #11D435;
    margin: 0;
    width: 100%;
    position: absolute;
    top: 47%;
}

.head-block {
    display: flex;
    height: 36.45vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-supp);
    border-bottom: 1px solid #292D32;
    background: url("../img/gallery/head_background.png") center / cover no-repeat;
    position: relative;
}

.star {
    width: 16.15vw;
    position: absolute;
    top: 1.25vw;
    z-index: 0;
    isolation: isolate;
}

.head-title {
    color: #635EF4;
    font-weight: 400;
    text-align: center;
    font-size: 5vw;
    z-index: 1;
}

.head-polygons-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25vw;
}

.polygon {
    height: 2vw;
    width: auto;
}

.head-polygons-list li:nth-child(3) .polygon {
    width: 6.25vw;
}
.head-polygons-list li:nth-child(4) .polygon {
    width: 3.1vw;
}


.about-block {
    display: flex;
    padding: var(--padding-main-gallery) 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-main);
}

.about-title {
    display: flex;
    width: clamp(345px, 50.5vw, 970px);
    font-weight: 400;
    padding: clamp(15px, 1.56vw, 30px) clamp(60px, 6.5vw ,125px);
    justify-content: center;
    border-radius: 0 clamp(16px, 1.77vw, 34px) clamp(16px, 1.77vw, 34px) 0;
    background: #635EF4;
    font-size: clamp(20px, 3.33vw, 64px);
    transition: var(--transition);
}

.about-content {
    display: flex;
    padding: 0 var(--padding-main-gallery);
    color: #1E1E1E;
    text-align: justify;
    font-family: var(--font-face-Poiret-One);
    font-size: clamp(15px, 2.86vw, 55px);
    font-weight: 400;
}

.art-picture {
    display: flex;
    height: 23.6vw;
    background-color: var(--main-dark);
}

.art-picture-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.art-picture-img.top {
    object-position: center;
}

.art-picture-img.bottom {
    object-position: 50% 70%;
}

.UI-block {
    display: flex;
    flex-direction: column;
    gap: var(--gap-main);
    background: #292D32;
}

.fonts-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-submain);
}

.font-item {
    font-size: clamp(20px, 6.66vw, 128px);
    font-weight: 400;
}

.color-list {
    display: flex;
    gap: clamp(10px, 2vw, 40px);
}

.color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-supp);
}

.color {
    width: clamp(45px, 7.8vw, 150px);
    aspect-ratio: 1;
    border-radius: var(--border-radius-gallery);
}

.color-name {
    font-family: var(--font-face-Poiret-One);
    font-size: clamp(12px, 2.5vw, 48px);
    font-weight: 400;
}

.lending-block {
    display: flex;
}

.lending-frame {
    height: 192.7vw;
    width: auto;
}

@media (max-width: 425px) {
    .about-title {
        width: 100%;
        border-radius: 0;
    }
}