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

@font-face {
    font-family: 'Antipasto Pro';
    src: url('../fonts/Antipasto-Pro/AntipastoPro-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unbounded';
    src: url('../fonts/Unbounded/Unbounded-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --main-light: #FFFFFF;
    --main-dark-blue: #231E4C;
    --bg-accent: #FFDB00;
    --main-gradient: linear-gradient(90deg,
            rgba(255, 219, 0, 0.8) 0%,
            rgba(255, 93, 73, 0.8) 70.5%,
            rgba(255, 83, 79, 0.8) 76%,
            rgba(255, 0, 127, 0.8) 100%);

    --font-face-Unbounded: 'Unbounded', sans-serif;
    --font-face-Antipasto-Pro: 'Antipasto Pro', sans-serif;
    --font-size-main: clamp(8px, 2.5vw, 48px);
    --font-size-supp: clamp(5px, 1.04vw, 20px);

    --border-radius-btn: clamp(50px, 5.2vw, 100px);

    --padding-main-facultet: clamp(16px, 3.33vw, 64px);
    --padding-supp-facultet: clamp(8px, 1.66vw, 32px);

    --column-gap-main-facultet: clamp(32px, 6.66vw, 220px);

    --transition-duration: 0.2s ease;
}

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

section {
    padding: var(--padding-main-facultet);
    transition: var(--transition-duration);
}

.content {
    display: flex;
    flex-direction: column;
    gap: var(--padding-main-facultet);
}

.head-block {
    padding: 0;
}

.frame-head {
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    padding: var(--padding-supp-facultet);
}

.head-text {
    font-size: clamp(5px, 2.5vw, 48px);
    font-weight: 400;
}

.head-text:first-child {
    text-align: left;
}

.head-text:last-child {
    text-align: right;
}

.text-accent-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-main);
    font-weight: 700;
    background-color: var(--bg-accent);
    padding: clamp(5px, 1.66vw, 32px) clamp(10px, 3.33vw, 64px);
    border-radius: var(--border-radius-btn);
}

.head-content {
    display: flex;
    padding: var(--padding-main-facultet);
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    height: 26vw;
    background: url("../img/facultet/top_background.webp") var(--main-light) center / cover no-repeat;
}

.head-discription {
    width: clamp(160px, 52vw, 1700px);
    font-weight: 700;
    text-align: right;
    font-size: clamp(10px, 3.38vw, 90px);
}

.hr-gradient {
    border: none;
    height: 7px;
    background: var(--main-gradient);
    margin: 0;
    width: 100%;
}

.about-block {
    display: flex;
    padding: 0 var(--padding-main-facultet);
}

.about-content {
    text-align: center;
    ;
    font-size: var(--font-size-main);
    font-weight: 400;
}

.color-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden; /* убираем вертикальный скролл */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: smooth;
}


.color-item {
    display: flex;
    height: clamp(30px, 9.37vw, 180px);
    padding: 3.125vw 6.77vw;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #FFF;
    font-size: var(--font-size-main);
    font-weight: 400;
}

.logo-block {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: var(--column-gap-main-facultet);
}

.logo-content {
    display: flex;
    flex-direction: column;
    row-gap: clamp(30px, 4.42vw, 85px);
}

.logo {
    width: clamp(140px, 14.58vw, 380px);
    height: auto;
}

.typography-block {
    display: flex;
    padding: 0;
    padding-bottom: var(--font-size-main);
    flex-direction: column;
    align-items: center;
    gap: var(--padding-main-facultet);
    position: relative;
}

.font-name-1 {
    text-align: center;
    font-size: var(--font-size-main);
    font-weight: 700;
}

.font-letters-1 {
    text-align: center;
    font-size: var(--font-size-supp);
    font-weight: 400;
}

.font-name-2 {
    text-align: center;
    font-family: var(--font-face-Antipasto-Pro);
    font-size: clamp(10px, 3.23vw, 62px);
    font-weight: 800;
}

.font-letters-2 {
    text-align: center;
    font-family: var(--font-face-Antipasto-Pro);
    font-size: var(--font-size-supp);
    font-weight: 400;
}

.smile-face {
    position: absolute;
    width: clamp(80px, 27.6vw, 530px);
    height: clamp(120px, 38vw, 730px);
}

.smile-face.girl {
    left: 0px;
    top: -2.6vw;
}

.smile-face.boy {
    right: 0px;
    top: -6.9vw;
}

.works-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(32px, 8.5vw, 164px);
    background: var(--main-gradient);
}

.works {
    padding: 0;
}

.list {
    display: grid;
    gap: var(--padding-main-facultet);
}

.list.posters-list {
    grid-template-columns: 1fr;
}

.list.tickets-list {
    grid-template-columns: 1fr;
}

.list.diplomes-list {
    grid-template-columns: 1fr;
}

.foot-block {
    display: flex;
    margin-top: calc(-1 * var(--padding-main-facultet));
    height: 60.83vw;
    padding: var(--padding-supp-facultet) var(--padding-main-facultet);
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background: url("../img/facultet/foot_image.webp") center / cover no-repeat;
}

.foot-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
}

.logo-ima {
    width: clamp(70px, 16.15vw , 310px);
    height: auto;
}

.text-year {
    color: #FFF;
    font-size: clamp(8px, 2.08vw ,40px);
    font-weight: 400;
}

@media (min-width: 1280px) {
  .list.posters-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .list.diplomes-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 2000px) {
  .list.posters-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .list.list.tickets-list {
    grid-template-columns: repeat(3, 1fr);
  }
}