/* Wrapper */
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600&display=swap");
.wrapper { padding: 0 16px; margin: 0 auto; width: 100%; }

@media screen and (min-width: 768px) { .wrapper { padding: 0 24px; } }

@media screen and (min-width: 1200px) { .wrapper { padding: 0 32px; max-width: 1200px; } }

@media screen and (min-width: 1920px) and (min-height: 1080px) { .wrapper { max-width: 1440px; } }

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

@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/Inter-LightItalic.woff2") format("woff2"), url("../fonts/Inter-LightItalic.woff") format("woff"); }

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

@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Italic.woff2") format("woff2"), url("../fonts/Inter-Italic.woff") format("woff"); }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.woff2") format("woff2"), url("../fonts/Inter-Medium.woff") format("woff"); }

@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/Inter-MediumItalic.woff2") format("woff2"), url("../fonts/Inter-MediumItalic.woff") format("woff"); }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"), url("../fonts/Inter-SemiBold.woff") format("woff"); }

@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBoldItalic.woff2") format("woff2"), url("../fonts/Inter-SemiBoldItalic.woff") format("woff"); }

* { border: 0; font-size: 100%; font-family: "Inter", sans-serif; margin: 0; outline: none; padding: 0; vertical-align: baseline; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

*, *::before, *::after { box-sizing: border-box; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

img { display: block; }

table { border-collapse: collapse; border-spacing: 0; }

tr, td { margin: 0; padding: 0; vertical-align: middle; }

video { max-width: 100%; }

.fa, .fab, .fal, .far, .fas { font-family: "Font Awesome 5 Free"; font-weight: 900; }

.truncate { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[class^="col-"], [class*=" col-"] { padding-left: 1rem; padding-right: 1rem; }

.col { flex-grow: 1; flex-basis: 0; max-width: 100%; }

.row { display: flex; flex-basis: auto; flex-direction: row; flex-grow: 0; flex-shrink: 1; flex-wrap: wrap; margin: 0 -1rem; max-width: 100%; }

.row--center-x { justify-content: center; }

.no-gutter { margin: 0; }

.no-gutter > [class^="col-"], .no-gutter [class*=" col-"] { padding: 0; }

.col-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; }

.col-offset-0 { margin-left: 0; }

.col-offset-1 { margin-left: 8.3333333333%; }

.col-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; }

.col-offset-0 { margin-left: 0; }

.col-offset-2 { margin-left: 16.6666666667%; }

.col-3 { flex-basis: 25%; max-width: 25%; }

.col-offset-0 { margin-left: 0; }

.col-offset-3 { margin-left: 25%; }

.col-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; }

.col-offset-0 { margin-left: 0; }

.col-offset-4 { margin-left: 33.3333333333%; }

.col-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; }

.col-offset-0 { margin-left: 0; }

.col-offset-5 { margin-left: 41.6666666667%; }

.col-6 { flex-basis: 50%; max-width: 50%; }

.col-offset-0 { margin-left: 0; }

.col-offset-6 { margin-left: 50%; }

.col-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; }

.col-offset-0 { margin-left: 0; }

.col-offset-7 { margin-left: 58.3333333333%; }

.col-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; }

.col-offset-0 { margin-left: 0; }

.col-offset-8 { margin-left: 66.6666666667%; }

.col-9 { flex-basis: 75%; max-width: 75%; }

.col-offset-0 { margin-left: 0; }

.col-offset-9 { margin-left: 75%; }

.col-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; }

.col-offset-0 { margin-left: 0; }

.col-offset-10 { margin-left: 83.3333333333%; }

.col-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; }

.col-offset-0 { margin-left: 0; }

.col-offset-11 { margin-left: 91.6666666667%; }

.col-12 { flex-basis: 100%; max-width: 100%; }

.col-offset-0 { margin-left: 0; }

.col-offset-12 { margin-left: 100%; }

h1 { font-family: "Josefin Sans", sans-serif; letter-spacing: -0.03em; font-size: 40px; line-height: 1.3; font-weight: 500; text-transform: uppercase; text-align: center; }

h2 { font-family: "Josefin Sans", sans-serif; letter-spacing: -0.03em; font-size: 40px; line-height: 1.3; font-weight: 500; margin-bottom: 48px; text-transform: uppercase; }

h4 { font-size: 20px; line-height: 1.5; }

p { font-size: 16px; line-height: 1.5; font-weight: 300; }

a { color: #E5402A; }

@media screen and (max-width: 767px) { .header { align-items: center; display: flex; flex-flow: row nowrap; justify-content: center; background-color: #f9f6f3; box-shadow: 0 0 8px rgba(42, 38, 35, 0.24); position: fixed; width: 100%; z-index: 10; } }

@media screen and (max-width: 767px) { .header nav { box-shadow: 0 0 16px rgba(42, 38, 35, 0.24); left: 0; height: 100%; overflow: auto; position: fixed; padding: 80px 16px 16px 16px; transform: translateX(-120%); transition: transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); top: 0; width: 100%; z-index: 100; } }

@media screen and (max-width: 1023px) { .cover .header { padding-top: 22%; } }

.header__content { align-items: center; display: flex; flex-flow: row nowrap; justify-content: center; margin: 0 auto; padding: 32px 0 24px 0; text-align: center; }

@media screen and (min-width: 768px) { .header__content { max-width: none; margin: 0; padding: 40px 0 40px 0; text-align: left; justify-content: space-between; } }

.header__title a { font-family: "Josefin Sans", sans-serif; letter-spacing: -0.03em; font-size: 24px; line-height: 1.3; font-weight: 600; text-decoration: none; text-transform: uppercase; }

@media screen and (max-width: 767px) { .header__title a { font-family: "Josefin Sans", sans-serif; letter-spacing: -0.03em; font-size: 20px; line-height: 1; } }

.header--light .header__title a { color: #38332E; }

.header--dark .header__title a { color: #ffffff; }

.header--light { color: #38332E; }

.header--dark { background-color: #000000; }

.footer { color: #ffffff; }

.dark .footer { background-color: #131211; }

.light .footer { background-color: #38332E; }

.footer .footer__content { padding: 40px 0; align-items: baseline; display: flex; flex-flow: row nowrap; justify-content: space-between; }

@media screen and (min-width: 1024px) { .footer .footer__copyright { align-items: baseline; display: flex; flex-flow: row nowrap; justify-content: flex-start; } }

.footer .footer__copyright p { margin-bottom: 0; padding: 8px 0; width: auto; }

@media screen and (min-width: 1024px) { .footer .footer__copyright p { margin-right: 16px; } }

.footer .footer__links { align-items: baseline; display: flex; flex-flow: row nowrap; justify-content: flex-start; gap: 24px; }

.footer .footer__links a { color: #ffffff; text-decoration: none; }

.footer .footer__link { color: #2A2623; display: block; font-weight: 400; padding: 8px 0; position: relative; text-decoration: none; position: relative; }

.footer .footer__link::before { bottom: -3px; content: ''; height: 1px; position: absolute; transform-origin: 100% 0%; transform: scaleX(0); transition: transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); width: 100%; }

.footer .footer__link:hover::before { transform: scaleX(1); transform-origin: 0% 0%; }

.header--light .footer .footer__link::before { background-color: #38332E; }

.header--dark .footer .footer__link::before { background-color: #ffffff; }

.home .footer .footer__link { color: #ffffff; }

.home .footer .footer__link a { color: #ffffff; }

.main-menu__mobile-button { padding: 32px 24px; position: fixed; left: 0; top: 0; z-index: 101; align-items: center; display: flex; flex-flow: row nowrap; justify-content: flex-start; }

@media screen and (min-width: 768px) { .main-menu__mobile-button { display: none; } }

.main-menu__mobile-button .main-menu__burger-icon { height: 16px; position: relative; transition: all 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); width: 20px; }

.main-menu__mobile-button .main-menu__burger-icon span { background-color: #131211; border-radius: 24px; height: 2px; left: 0; width: 100%; position: absolute; transform: translateY(-50%) rotate(0deg); transform-origin: 50% 50%; transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.header--dark .main-menu__mobile-button .main-menu__burger-icon span { background-color: #ffffff; }

.main-menu__mobile-button .main-menu__burger-icon span:nth-child(1) { top: 0%; }

.main-menu__mobile-button .main-menu__burger-icon span:nth-child(2) { top: 50%; }

.main-menu__mobile-button .main-menu__burger-icon span:nth-child(3) { top: 100%; }

.header--scrolled .main-menu__mobile-button .main-menu__burger-icon span { background-color: #2A2623; }

.main-menu__mobile-button.is-open .main-menu__burger-icon span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }

.main-menu__mobile-button.is-open .main-menu__burger-icon span:nth-child(2) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

.main-menu__mobile-button.is-open .main-menu__burger-icon span:nth-child(3) { opacity: 0; }

@media screen and (max-width: 1023px) { .main-menu__mobile-button.is-open + nav { transform: translateX(0%); } }

.main-menu__mobile-menu-text { display: none; }

@media screen and (min-width: 768px) { .main-menu { align-items: center; display: flex; flex-flow: row nowrap; justify-content: space-between; gap: 32px; position: static; height: 40px; } }

@media screen and (max-width: 767px) { .main-menu__element { margin-bottom: 24px; } }

.main-menu__link { font-family: "Josefin Sans", sans-serif; letter-spacing: -0.03em; font-size: 16px; line-height: 1.5; font-weight: 400; text-decoration: none; text-transform: uppercase; position: relative; }

.main-menu__link::before { bottom: -3px; content: ''; height: 1px; position: absolute; transform-origin: 100% 0%; transform: scaleX(0); transition: transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); width: 100%; }

.main-menu__link:hover::before { transform: scaleX(1); transform-origin: 0% 0%; }

.header--light .main-menu__link::before { background-color: #38332E; }

.header--dark .main-menu__link::before { background-color: #ffffff; }

.header--light .main-menu__link { color: #38332E; }

.header--dark .main-menu__link { color: #ffffff; }

.pill { border-radius: 16px; display: block; font-family: "Josefin Sans", sans-serif; font-weight: 500; text-align: center; text-decoration: none; text-transform: uppercase; }

.pill--work { font-family: "Josefin Sans", sans-serif; letter-spacing: -0.03em; font-size: 11px; line-height: 1; background-color: rgba(255, 255, 255, 0.25); padding: 6px 10px 3px 10px; }

.pill--filter { border: 1px solid #2A2623; color: #2A2623; cursor: pointer; padding: 6px 12px 6px 12px; }

.pill--filter:hover { color: #E5402A; }

.pill--filter span { font-family: "Josefin Sans", sans-serif; letter-spacing: -0.03em; font-size: 12px; line-height: 1; position: relative; top: 1px; }

.pill--active { background-color: rgba(229, 64, 42, 0.04); border-color: #E5402A; color: #E5402A; }

.pill--details { font-family: "Josefin Sans", sans-serif; letter-spacing: -0.03em; font-size: 12px; line-height: 1; background-color: rgba(42, 38, 35, 0.7); color: #ffffff; padding: 7px 12px 4px 12px; }

.filter { align-items: center; display: flex; flex-flow: row nowrap; justify-content: flex-start; gap: 16px; margin-bottom: 40px; overflow-x: auto; padding: 40px 0; }

@media screen and (min-width: 768px) { .filter { grid-template-columns: repeat(2, 1fr); } }

@media screen and (min-width: 1024px) { .filter { justify-content: center; margin-bottom: 0; padding: 80px 0; } }

.filter li { flex: 1 0 auto; }

@media screen and (min-width: 1024px) { .filter li { flex: 0 0 auto; } }

.work { display: block; font-family: "Inter", sans-serif; position: relative; transition: all 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); top: 0; }

.work:hover { box-shadow: 0 0 4px rgba(19, 18, 17, 0.2), 0 0 24px rgba(19, 18, 17, 0.2); top: -4px; }

.work:hover .work__info { background-color: #131211; }

.work__image, .work__info, .work__title { display: block; }

.work__image { background-color: #000000; background-position: 50% 50%; background-repeat: no-repeat; background-size: 101%; padding-top: 56.25%; width: 100%; }

.work__info { background-color: rgba(19, 18, 17, 0.8); color: #ffffff; padding: 12px 16px 16px 16px; width: 100%; transition: background-color 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955), bottom 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.work__title { margin-bottom: 4px; }

.work__title a { font-size: 20px; line-height: 1; color: #ffffff; font-family: "Josefin Sans", sans-serif; font-weight: 500; text-transform: uppercase; text-decoration: none; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.work__extras { margin-top: 8px; }

.work__collaboration { margin-bottom: 8px; font-size: 14px; line-height: 1.3; }

.work__collaboration a { color: #E17060; }

.work__data { align-items: baseline; display: flex; flex-flow: row nowrap; justify-content: space-between; font-size: 14px; line-height: 1.5; }

.work__duration-year { align-items: baseline; display: flex; flex-flow: row nowrap; justify-content: space-between; gap: 16px; }

.work__year { font-size: 14px; line-height: 1.5; margin-bottom: 8px; }

.work__pills { align-items: center; display: flex; flex-flow: row wrap; justify-content: flex-end; gap: 8px; }

.responsive-inspector { background-color: #2A2623; bottom: 0; left: 0; padding: 8px 12px; position: fixed; z-index: 30; align-items: baseline; display: flex; flex-flow: row nowrap; justify-content: center; }

.responsive-inspector::before { color: #ffffff; }

.responsive-inspector__mobile, .responsive-inspector__tablet-vertical, .responsive-inspector__tablet-horizontal, .responsive-inspector__desktop, .responsive-inspector__large-screen { color: #ffffff; display: none; font-weight: 400; }

.responsive-inspector__mobile::after, .responsive-inspector__tablet-vertical::after, .responsive-inspector__tablet-horizontal::after, .responsive-inspector__desktop::after, .responsive-inspector__large-screen::after { font-weight: 600; }

.responsive-inspector__mobile::after { content: ": X < 768px"; }

@media screen and (max-width: 767px) { .responsive-inspector__mobile { display: block; } }

.responsive-inspector__tablet-vertical::after { content: ": 768px < X < 1024px"; }

@media screen and (min-width: 768px) and (max-width: 1023px) { .responsive-inspector__tablet-vertical { display: block; } }

.responsive-inspector__tablet-horizontal::after { content: ": 1024px < X < 1200px"; }

@media screen and (min-width: 1024px) and (max-width: 1199px) { .responsive-inspector__tablet-horizontal { display: block; } }

.responsive-inspector__desktop::after { content: ": 1200px < X < 1920px"; }

@media screen and (min-width: 1200px) and (max-width: 1919px) { .responsive-inspector__desktop { display: block; } }

.responsive-inspector__large-screen::after { content: ": X > 1920px"; }

@media screen and (min-width: 1920px) and (min-height: 1080px) { .responsive-inspector__large-screen { display: block; } }

.home { background-color: #f9f6f3; }

.home-video { background-color: #000000; }

.home-bio__info { padding: 60px 0; align-items: center; display: flex; flex-flow: column-reverse nowrap; justify-content: space-between; }

@media screen and (min-width: 768px) { .home-bio__info { flex-direction: row; padding: 120px 0 60px 0; } }

@media screen and (min-width: 1024px) { .home-bio__info { padding: 120px 0; } }

.home-bio__picture { flex-grow: 1; flex-shrink: 0; padding-top: 16px; align-items: center; display: flex; flex-flow: row nowrap; justify-content: center; }

@media screen and (min-width: 768px) { .home-bio__picture { padding-right: 16px; padding-top: 0; } }

@media screen and (min-width: 1024px) { .home-bio__picture { flex-basis: 50%; } }

.home-bio__picture img { max-width: 352px; width: 100%; }

.home-bio__text { flex-grow: 1; padding-bottom: 16px; }

@media screen and (min-width: 768px) { .home-bio__text { padding-left: 16px; padding-bottom: 0; } }

.home-bio__text h1 { color: #38332E; margin-bottom: 24px; text-align: left; }

.home-bio__text p { color: #38332E; margin-bottom: 24px; }

.home-bio__text p:last-child { margin-bottom: 0; }

.home-bio__text a { color: #E5402A; }

.home-news { padding: 60px 0 120px 0; }

@media screen and (min-width: 1024px) { .home-news { padding: 120px 0; } }

.home-news h2 { font-family: "Josefin Sans", sans-serif; letter-spacing: -0.03em; font-size: 40px; line-height: 1.3; color: #38332E; font-weight: 500; margin-bottom: 48px; text-transform: uppercase; text-align: center; }

.home-news__container { display: grid; grid-template-columns: repeat(1, 1fr); row-gap: 32px; -moz-column-gap: 32px; column-gap: 32px; }

@media screen and (min-width: 1024px) { .home-news__container { grid-template-columns: repeat(3, 1fr); } }

@media screen and (min-width: 1024px) { .home-news__container { row-gap: 64px; -moz-column-gap: 64px; column-gap: 64px; } }

.home-news__element { flex: 0 0 33%; }

.home-news__element h5 { margin-bottom: 4px; font-size: 16px; line-height: 1.5; }

.home-news__element p { line-height: 1.5; font-size: 16px; line-height: 1.5; }

.home-news__image { margin-bottom: 24px; }

.home-news__image img { width: 100%; }

.inner.light { background-color: #f9f6f3; }

@media screen and (max-width: 767px) { .inner.light nav { background-color: #f9f6f3; } }

.inner.dark { background-color: #131211; color: #ffffff; }

@media screen and (max-width: 767px) { .inner.dark nav { background-color: #131211; } }

.works { padding: 120px 0 60px 0; }

@media screen and (min-width: 768px) { .works { padding: 60px 0; } }

.works__list { -moz-column-gap: 40px; column-gap: 40px; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); padding-bottom: 120px; row-gap: 40px; }

@media screen and (min-width: 768px) { .works__list { -moz-column-gap: 40px; column-gap: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }

@media screen and (min-width: 1024px) { .works__list { -moz-column-gap: 64px; column-gap: 64px; row-gap: 64px; } }

@media screen and (min-width: 1200px) { .works__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 96px; } }

.work-carousel { background-color: #000000; padding-bottom: 80px; padding-top: 88px; position: relative; }

@media screen and (min-width: 768px) { .work-carousel { padding-top: 0; } }

.work-carousel__controls { align-items: center; display: flex; flex-flow: row nowrap; justify-content: space-between; bottom: -64px; gap: 12px; left: 50%; transform: translateX(-50%); position: absolute; z-index: 2; }

.work-carousel__dot { background-color: rgba(255, 255, 255, 0.6); border-radius: 6px; display: block; height: 6px; width: 6px; }

.work-carousel__dot.current { background-color: #ffffff; }

.work-carousel__button { align-items: center; display: flex; flex-flow: row nowrap; justify-content: center; background-color: rgba(255, 255, 255, 0); border-radius: 32px; color: #ffffff; transition: background-color 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.work-carousel__button:hover { background-color: rgba(255, 255, 255, 0.3); }

.work-carousel__button--prev { padding: 8px 10px 8px 6px; }

.work-carousel__button--next { padding: 8px 6px 8px 10px; }

.work-carousel__content { position: relative; height: 40vw; }

.work-carousel__image { background-size: auto 100%; background-repeat: no-repeat; background-position: 50% 50%; height: 100%; left: 50%; opacity: 0; position: absolute; transform: translateX(-50%); transition: opacity 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); top: 0; width: 100%; }

.work-carousel__image.current { opacity: 1; }

.work-detail__video .wrapper { padding: 32px 0px 40px 0px; align-items: center; display: flex; flex-flow: row nowrap; justify-content: center; }

.work-detail__video iframe { width: 100%; }

.work-detail__video--light { background-color: #ffffff; }

.work-detail__video--dark { background-color: #131211; }

.work-detail__body { font-family: "Inter", sans-serif; padding: 80px 0px 80px 0px; }

.work-detail__body h1 { margin-bottom: 32px; text-align: left; }

.work-detail__content { align-items: flex-start; display: flex; flex-flow: column nowrap; justify-content: flex-start; gap: 64px; }

@media screen and (min-width: 1024px) { .work-detail__content { flex-direction: row; } }

.work-detail__main { flex-grow: 1; }

.work-detail__main h3 { font-size: 24px; line-height: 1.5; color: #38332E; margin-bottom: 8px; }

.work-detail__features { align-items: center; display: flex; flex-flow: row nowrap; justify-content: flex-start; margin-bottom: 24px; gap: 32px; }

.work-detail__categories { align-items: center; display: flex; flex-flow: row nowrap; justify-content: flex-start; gap: 8px; }

.work-detail__video { margin-bottom: 32px; padding: 56.25% 0 0 0; position: relative; }

.work-detail__video iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

.work-detail__audio { margin-bottom: 32px; }

.work-detail__excerpt { font-weight: 500; margin-bottom: 24px; }

.work-detail__description { margin-bottom: 64px; }

.work-detail__description p { margin-bottom: 32px; font-size: 16px; line-height: 1.5; }

.work-detail__presentations p, .work-detail__presentations li { font-size: 16px; line-height: 1.5; }

.work-detail__presentations p { color: #8C8073; margin-right: 32px; flex-shrink: 0; width: 80px; }

.work-detail__presentations > li { color: #38332E; align-items: flex-start; display: flex; flex-flow: row nowrap; justify-content: flex-start; margin-bottom: 32px; }

.work-detail__presentations > li li { list-style: disc; }

.work-detail__sidebar { flex-shrink: 0; flex-basis: 352px; }

.work-detail__sidebar a { color: #E5402A; }

.work-detail__sidebar-block { margin-bottom: 48px; color: #38332E; }

.work-detail__sidebar-block h4 { margin-bottom: 8px; font-size: 20px; line-height: 1.5; }

.work-detail__sidebar-block li { line-height: 1.5; margin-bottom: 4px; }

.work-detail__credits-block { margin-bottom: 40px; }

.work-detail__credits-block h5 { color: #8C8073; margin-bottom: 8px; font-size: 16px; line-height: 1.5; }

.about { padding: 60px 0; }

@media screen and (min-width: 1024px) { .about { padding: 120px 0 60px 0; } }

.about__cover { background-size: cover; background-position: 50% 50%; height: 100vw; position: relative; align-items: center; display: flex; flex-flow: row nowrap; justify-content: center; }

@media screen and (min-width: 768px) { .about__cover { height: 40vw; } }

.about__cover::before { background-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)); background-position: 0% 0%; background-repeat: no-repeat; background-size: 100% 50%; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }

.about__cover h1 { position: relative; z-index: 2; }

.about__content { align-items: flex-start; display: flex; flex-flow: column nowrap; justify-content: flex-start; gap: 64px; }

@media screen and (min-width: 768px) { .about__content { flex-direction: row; } }

.about__description { flex-grow: 1; }

.about__description p { margin-bottom: 32px; }

@media screen and (min-width: 768px) { .about__photos { flex-shrink: 0; flex-basis: 240px; } }

@media screen and (min-width: 1024px) { .about__photos { flex-basis: 352px; } }

@media screen and (min-width: 1920px) and (min-height: 1080px) { .about__photos { flex-basis: 520px; } }

.about__photos h4 { margin-bottom: 16px; }

.about__photos ul { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; }

@media screen and (min-width: 768px) and (max-width: 1023px) { .about__photos ul { -moz-column-gap: 32px; column-gap: 32px; grid-template-columns: repeat(1, 1fr); row-gap: 32px; } }

.about__photos ul img { -webkit-filter: saturate(0%); filter: saturate(0%); transition: -webkit-filter 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: filter 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: filter 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-filter 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); width: 100%; }

.about__photos ul img:hover { -webkit-filter: saturate(100%); filter: saturate(100%); }

.collaborators { padding: 60px 0; }

.collaborators h2 { color: #f9f6f3; text-align: center; }

.collaborator__list { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 32px; -moz-column-gap: 32px; column-gap: 32px; }

@media screen and (min-width: 768px) { .collaborator__list { grid-template-columns: repeat(3, 1fr); } }

@media screen and (min-width: 1024px) { .collaborator__list { grid-template-columns: repeat(4, 1fr); row-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } }

.collaborator__card { background-position: 50% 50%; background-repeat: no-repeat; background-size: 101%; -webkit-filter: saturate(0%); filter: saturate(0%); padding-top: 100%; position: relative; transition: -webkit-filter 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: filter 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: filter 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-filter 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); width: 100%; }

.collaborator__card:hover { -webkit-filter: saturate(100%); filter: saturate(100%); }

.collaborator__card img { width: 100%; }

.collaborator__info { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 100%); background-repeat: no-repeat; bottom: 0; color: #ffffff; height: 100%; left: 0; padding: 16px; position: absolute; width: 100%; align-items: flex-end; display: flex; flex-flow: row nowrap; justify-content: flex-start; font-size: 16px; line-height: 1.5; }

.contact { padding: 60px 0; }

.contact h2 { color: #f9f6f3; text-align: center; }

.contact .contact__address { align-items: center; display: flex; flex-flow: row nowrap; justify-content: center; }

.contact .contact__email a { color: #ffffff; }

.websites { padding: 120px 0 60px 0; }

@media screen and (min-width: 768px) { .websites { padding: 60px 0; } }

.websites h2 { color: #131211; text-align: center; }

.websites__list { align-items: center; display: flex; flex-flow: column nowrap; justify-content: center; gap: 32px; }

@media screen and (min-width: 768px) { .websites__list { gap: 64px; } }

@media screen and (min-width: 1024px) { .websites__list { flex-direction: row; } }

.websites__item { background-position: 50% 50%; background-repeat: no-repeat; background-size: 101%; flex: 0 0 360px; position: relative; text-decoration: none; top: 0; transition: all 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); width: 100%; }

.websites__item span { display: block; }

.websites__item img { width: 100%; }

.websites__item:hover { box-shadow: 0 0 4px rgba(19, 18, 17, 0.2), 0 0 24px rgba(19, 18, 17, 0.2); top: -4px; }

.websites__item:hover .websites__info { background-color: #131211; }

.websites__info { background-color: rgba(19, 18, 17, 0.8); color: #ffffff; padding: 16px; width: 100%; transition: background-color 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955), bottom 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.websites__title { font-size: 20px; line-height: 1.5; font-weight: 600; }

.websites__description, .websites__year { font-size: 16px; line-height: 1.5; font-weight: 300; }

.articles { padding: 60px 0 120px 0; }

.articles h2 { color: #131211; text-align: center; }

.articles__list { max-width: 768px; margin: 0 auto; }

.articles__item { align-items: baseline; display: flex; flex-flow: column nowrap; justify-content: flex-start; margin-bottom: 24px; }

@media screen and (min-width: 768px) { .articles__item { flex-direction: row; } }

.articles__title a { color: #131211; font-weight: 400; }

.articles__description, .articles__year { font-size: 16px; line-height: 1.5; font-weight: 300; }

.articles__year { color: #8C8073; margin-right: 32px; flex-shrink: 0; width: 104px; }