/* ===== FONTS ===== */

@font-face {
    font-family: 'Architype Renner';
    src: url('ArchitypeRenner-Regular.woff2') format('woff2'),
         url('ArchitypeRenner-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Architype Renner';
    src: url('ArchitypeRenner-Medium.woff2') format('woff2'),
         url('ArchitypeRenner-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Architype Renner';
    src: url('ArchitypeRenner-Demi.woff2') format('woff2'),
         url('ArchitypeRenner-Demi.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Architype Renner';
    src: url('ArchitypeRenner-Bold.woff2') format('woff2'),
         url('ArchitypeRenner-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* общий стиль страницы */
body {
    margin: 0; /* убирает стандартные отступы браузера */
    background-color: #ffffff; /* светло-серый фон как на скрине */
    font-family: 'Architype Renner', sans-serif;
    color: black; /* цвет текста */
}

/* верхний текст (имя) */
.home .top-name {
    font-size: 26px; /* маленький текст */
    margin: 30px 40px; /* отступ сверху и слева */
}

/* основной блок */
.home main {
    margin-left: 140px; /* сдвиг всего контента вправо */
    margin-top: 190px; /* отступ сверху */
}

/* главный заголовок */
.home h1 {
    font-size: 84px; /* размер как на скрине */
    font-weight: 300; /* делает текст тоньше */
    margin-bottom: 10px; /* расстояние до следующего текста */
}

/* подпись "Based in Paris" */
.home .location {
    font-size: 24px; /* меньше чем заголовок */
    margin-bottom: 120px; /* расстояние до меню */
}

/* навигация */
.home nav a {
    font-size: 42px; /* крупные ссылки */
    margin-right: 80px; /* расстояние между словами */
    text-decoration: underline; /* подчёркивание */
    color: black; /* цвет */
}

/* эффект при наведении */
.home nav a:hover {
    opacity: 0.5; /* делает чуть прозрачным при наведении */
}

/* 📲 TABLET версия */
@media (max-width: 1024px) {

    .home main {
        margin-left: 30px; /* меньше чем десктоп, больше чем мобилка */
        margin-top: 120px;
        padding-bottom: 220px; /* пустое место снизу страницы */
    }

    .home h1 {
        font-size: 48px; /* средний размер */
        line-height: 1.3;
    }

    .home .location {
        font-size: 18px;
        margin-bottom: 80px;
    }

    .home nav a {
        font-size: 24px;
        margin-right: 60px; /* меньше расстояние */
    }

    .home .top-name {
        margin: 25px 30px;
        font-size: 20px;
    }


    
}

@media (max-width: 768px) {

    /* уменьшаем общий отступ */
    .home main {
        margin-left: 20px; /* было 80 → стало компактно */
        margin-top: 80px;
                padding-bottom: 120px; /* пустое место снизу страницы */

    }

    /* уменьшаем заголовок */
    .home h1 {
        font-size: 42px; /* было 48 → слишком большой для телефона */
        line-height: 1.2; /* чтобы текст не “разваливался” */
    }

    /* текст "Based in Paris" */
    .home .location {
        font-size: 16px;
        margin-bottom: 80px;
    }

    /* меню делаем вертикальным */
    .home nav a {
        display: block; /* теперь ссылки друг под другом */
        margin-bottom: 25px; /* расстояние между ними */
        font-size: 22px;
    }

    /* верхнее имя */
    .home .top-name {
        margin: 15px 20px;
        font-size: 16px;
    }

}




/* 🔝 HEADER */
.header {
    display: flex; /* ставит элементы в одну линию */
    justify-content: space-between; /* разносит влево и вправо */
    align-items: center;
    padding: 30px 40px; /* отступы сверху, справа, снизу, слева */
}

.logo {
    font-size: 26px;
}

.menu {
    display: flex;
    gap: 60px;
}

.menu a {
    margin: 0;
    font-size: 26px;
    text-decoration: none;
    color: black;
}

/* 🧱 СТРАНИЦА WORKS */
.works-page {
    text-align: center; /* центрируем заголовки */
    margin-top: 100px;
        margin-left: 0; /* 🔥 сбрасывает старый сдвиг main, если он был */
        margin-right: 0; /* 🔥 сбрасывает старый сдвиг main, если он был */
}

.works main {
    margin-right: 0; /* 🔥 сбрасывает старый сдвиг main, если он был */
    margin-left: 0;
}

/* заголовок */
.title {
    font-size: 52px;
    font-weight: 400;
}

/* подзаголовок */
.subtitle {
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 80px;
}

/* ОДИН ПРОЕКТ */
.project {
    text-align: center;
    width: 100%;
    max-width: 340px; /* по умолчанию 340, но может стать уже */
}

.grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 340px));
    /* 3 колонки, максимум 340px, но могут сжиматься */

    column-gap: 130px;
    row-gap: 60px;

    width: min(100%, max-content);
    /* если всё влезает — сетка как раньше,
       если не влезает — ужимается под экран */

    justify-content: center;
    margin: 0 auto;
    padding: 0 20px; /* немного воздуха по краям */
    box-sizing: border-box;
}

/* КВАДРАТ ДЛЯ КАРТИНКИ */
.project-image-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* квадрат */
    height: auto;
    overflow: hidden;
    margin: 0;
    background-color: #d9d9d9;
}

/* КАРТИНКА ВНУТРИ КВАДРАТА */
.project-image-box img {
    width: 100%; /* картинка растягивается на всю ширину квадрата */
    height: 100%; /* картинка растягивается на всю высоту квадрата */
    object-fit: cover; /* САМОЕ ВАЖНОЕ: фото заполнит квадрат без кривого растягивания */
    display: block; /* убирает лишний микро-отступ снизу у img */
    filter: grayscale(100%); /* чёрно-белый режим */
    transition: filter 0.3s ease, transform 0.3s ease; /* плавное наведение */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ */
.project-image-box img:hover {
    filter: grayscale(0%); /* возвращает цвет */
    transform: scale(1.03); /* лёгкое увеличение */
}

/* ПОДПИСЬ */
.caption {
    margin-top: 20px; /* расстояние между квадратом и текстом */
    font-size: 24px; /* размер текста подписи */
}

/* подзаголовок */
.subtitle1 {
    text-align: center;
    width: max-content;
margin: 0 auto;
    font-size: 36px;
    margin-top: 80px;
    margin-bottom: 80px;
}

/* заголовок1 */
.title1 {
    margin-top: 80px;
    font-size: 52px;
    font-weight: 400;
}

/* подзаголовок */
.subtitle2 {
    width: max-content;
margin: 0 auto;
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 80px;
}

.grid-vertical .project-image-box {
    aspect-ratio: 340 / 480;
    height: auto;
}

/* подзаголовок */
.subtitle3 {
    width: max-content;
margin: 0 auto;
    font-size: 36px;
    margin-top: 80px;
    margin-bottom: 80px;
}

.logo-sub {
    display: inline; /* на ПК в строку */
}

@media (max-width: 1024px) {

    /* 🔝 ХЕДЕР */
    .header {
        padding: 25px 30px;
    }

    .logo {
        font-size: 20px;
    }

    .menu {
        gap: 40px;
    }

    .menu a {
        font-size: 20px;
    }

    /* 🧱 ОСНОВНОЙ БЛОК */
    .works-page {
        margin-top: 80px;
        padding-left: 30px;
        padding-right: 30px;
    }

    /* ЗАГОЛОВКИ */
    .title,
    .title1 {
        font-size: 42px;
    }

    /* 🔹 subtitle (первый) */
    .subtitle {
        font-size: 28px;
        margin-top: 20px;
        margin-bottom: 60px;
    }

    /* 🔹 subtitle1 (с отступом сверху) */
    .subtitle1 {
        font-size: 28px;
        margin-top: 60px; /* 🔥 как ты и хотел */
        margin-bottom: 60px;
    }

    /* 🔹 subtitle2 */
    .subtitle2 {
        font-size: 28px;
        margin-top: 20px;
        margin-bottom: 60px;
    }

    /* 🔹 subtitle3 (такой же как subtitle1) */
    .subtitle3 {
        font-size: 28px;
        margin-top: 60px; /* 🔥 совпадает с subtitle1 */
        margin-bottom: 60px;
    }

    /* 🔲 СЕТКА: 2 в ряд */
    .grid {
        grid-template-columns: repeat(2, 300px);
        gap: 80px;
        row-gap: 50px;
        width: max-content;
        margin: 0 auto;
    }

    .project {
        width: 300px;
    }

    .project-image-box {
        width: 300px;
        height: 300px;
    }

    .grid-vertical .project-image-box {
        height: 420px;
    }

    .caption {
        font-size: 20px;
    }
}

@media (max-width: 768px) {

    /* 🔝 ХЕДЕР */
    .header {
        padding: 20px 20px; /* меньше отступы по краям */
        align-items: flex-start; /* чтобы шапка не выглядела слишком растянутой */
    }

    .logo {
        font-size: 16px; /* уменьшаем логотип */
    }

.logo-sub {
        display: block; /* 🔥 перенос на новую строку */
    }

    .menu {
        gap: 20px; /* меньше расстояние между пунктами */
    }

    .menu a {
        font-size: 16px; /* уменьшаем пункты меню */
    }

    /* 🧱 ОСНОВНОЙ БЛОК */
    .works-page {
        margin-top: 60px; /* меньше отступ сверху */
        padding-left: 20px;  /* небольшой воздух по краям */
        padding-right: 20px;
    }

    /* ЗАГОЛОВКИ */
    .title,
    .title1 {
        font-size: 36px; /* меньше чем на ПК */
    }

    .subtitle {
        font-size: 30px; /* уменьшаем подзаголовки */
        margin-top: 20px;
        margin-bottom: 50px;
    }

    .subtitle1 {
        font-size: 30px; /* уменьшаем подзаголовки */
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .subtitle2 {
        font-size: 30px; /* уменьшаем подзаголовки */
        margin-top: 20px;
        margin-bottom: 50px;
    }

    .subtitle3 {
        font-size: 30px; /* уменьшаем подзаголовки */
        margin-top: 50px;
        margin-bottom: 50px;
    }

    /* СЕТКА: теперь 1 проект в ряд */
    .grid {
        grid-template-columns: 1fr; /* одна колонка */
        gap: 0;
        row-gap: 50px; /* расстояние между проектами по вертикали */
        width: 100%; /* сетка по ширине экрана */
        justify-items: center; /* центрируем карточки */
    }

    /* КАРТОЧКА ПРОЕКТА */
    .project {
        width: 100%;
        max-width: 240px; /* чтобы не становилось шире исходного */
    }

    /* КВАДРАТНЫЕ ИЗОБРАЖЕНИЯ */
    .project-image-box {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1; /* квадрат */
    }

    /* ВЕРТИКАЛЬНЫЕ ПОСТЕРЫ */
    .grid-vertical .project-image-box {
        aspect-ratio: 340 / 480; /* сохраняем постерную пропорцию */
        height: auto;
    }

    /* ПОДПИСИ */
    .caption {
        font-size: 18px;
        margin-top: 15px;
    }
}

.project-link {
    display: block;
    text-decoration: none; /* убирает синий и подчеркивание */
    color: black; /* текст остаётся чёрным */
}

.logo {
    text-decoration: none; /* убирает подчеркивание */
    color: black; /* делает текст черным */
}

/* ===== PROJECT PAGE ===== */

.project-page {
    margin-top: 100px;
    padding: 0 40px 120px 40px; /* воздух по краям и снизу */
}

.project-title {
    text-align: center;
    font-size: 52px;
    font-weight: 400;
    margin-bottom: 80px;
}

/* СЕТКА ПРОЕКТА */
.project-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 900px));
    /* 2 картинки в ряд, но могут сжиматься */

    column-gap: 40px;
    row-gap: 40px;

    width: min(100%, max-content);
    justify-content: center;
    margin: 0 auto 100px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ОДИН БЛОК КАРТИНКИ */
.project-gallery-item {
    width: 100%;
    max-width: 900px; /* максимум ширина блока */
}

/* САМА КАРТИНКА */
.project-gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3; /* формат около 1920x1080 */
    object-fit: cover; /* одинаковые прямоугольники */
    display: block;
    background-color: #d9d9d9;
}

.project-gallery-1918 .project-gallery-item-center {
    grid-column: 1 / -1;
    justify-self: center;
}

/* ===== TOULOUSE PROJECT GALLERY ===== */

.project-gallery-toulouse {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 900px));
    /* 2 колонки */

    column-gap: 40px;
    row-gap: 40px;

    width: min(100%, max-content);
    justify-content: center;
    margin: 0 auto 100px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* обычные картинки */
.project-gallery-toulouse .project-gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3; /* обычный горизонтальный формат */
    object-fit: cover;
    display: block;
    background-color: #d9d9d9;
}

/* широкая картинка на всю ширину двух колонок */
.project-gallery-toulouse .project-gallery-item-wide {
    grid-column: span 2;
    /* растягивает блок на 2 колонки */
    max-width: 100%; /* убираем ограничение */
}

.project-gallery-toulouse .project-gallery-item-wide img {
    width: 100%;
    aspect-ratio: 21 / 9; /* более длинная горизонтальная */
    object-fit: cover;
    display: block;
    aspect-ratio: auto; /* берёт реальное соотношение */
    border: 2px solid black;
    background-color: #d9d9d9;
}

/* ТЕКСТ ПОД ГАЛЕРЕЕЙ */
.project-description {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.project-description p {
    font-size: 32px;
    line-height: 1.5;
    margin: 0;
}

/* ===== MARIINSKY PROJECT ===== */

.mariinsky-gallery-wrap {
    width: min(100%, 1840px); /* общий контейнер для верха и низа */
    margin: 0 auto 100px auto; /* центрируем весь блок */
    padding: 0 20px;
    box-sizing: border-box;
}

/* верхние 2 горизонтальные картинки */
.project-gallery-mariinsky-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 40px;

    width: 100%;
    margin: 0 0 50px 0; /* расстояние до постеров */
    padding: 0;
    box-sizing: border-box;
}

.project-gallery-mariinsky-top .project-gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3; /* или 16 / 9, если хочешь шире */
    object-fit: cover;
    display: block;
    background-color: #d9d9d9;
}

.project-gallery-mariinsky-posters {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* ТЕ ЖЕ 2 колонки, что и сверху */

    column-gap: 40px;
    row-gap: 40px;

    width: 100%;
    margin: 0 auto 100px auto;
    padding: 0;
    box-sizing: border-box;
}

.project-gallery-mariinsky-posters .project-gallery-item {
    width: 620px;
    height: 877px;
    justify-self: center;
}

.project-gallery-mariinsky-posters .project-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* или contain, если не хочешь обрезки */
    display: block;
    background-color: #d9d9d9;
}

.mariinsky-block {
    display: flex;
    flex-direction: column;
    align-items: center; /* обе галереи центрируются по одной оси */
}

.project-gallery-mariinsky-posters {
    margin: 0 auto 100px auto; /* нижний блок по центру */
}

.project-gallery-single-poster {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
    margin: 0 auto 100px auto;
    padding: 0;
    box-sizing: border-box;
}

.project-gallery-single-poster .project-gallery-item {
    width: 620px;
    height: 877px;
}

.project-gallery-single-poster .project-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #d9d9d9;
}

/* ===== COSMOS FIX (3:2 БЕЗ ОБРЕЗКИ) ===== */

.project-gallery-cosmos .project-gallery-item img {
    aspect-ratio: 3 / 2;   /* правильное соотношение */
    object-fit: contain;   /* не режет картинку */
    background-color: #d9d9d9;
}

.project-description h2 {
    margin-top: 40px;
        font-weight: 400;      /* убираем жирность */
    margin-bottom: 15px;
    font-size: 38px;
}

.cv-date {
    font-weight: 500; /* вот он "средний" вариант */
}

.project-description a {
    text-decoration: none;
    color: inherit;
}

.project-description {
    width: 100% !important;
    max-width: 1400px !important;
    align-self: stretch;
}

.project-description p {
    width: 100% !important;
    max-width: none !important;
}


/* ===== FOOTER ===== */

.site-footer {
    margin-top: 180px; /* расстояние от контента страницы до футера */
    padding: 0 40px 80px 40px; /* боковые и нижний отступ */
    text-align: center; /* всё по центру */
}

.footer-title {
    font-size: 52px; /* большой заголовок Contacts */
    font-weight: 400;
    margin: 0 0 80px 0;
}

.footer-line {
    width: 100%;
    max-width: 1200px; /* ограничиваем линию по ширине */
    height: 1px;
    background-color: black;
    margin: 0 auto 40px auto; /* центрируем и даём отступ снизу */
}

.footer-contacts {
    display: flex;
    flex-direction: column; /* в столбик */
    gap: 35px; /* расстояние между строками */
    margin-bottom: 40px;
}

.footer-contacts p {
    margin: 0;
    font-size: 24px;
}

.footer-contacts a {
    color: black; /* чтобы не было синих ссылок */
    text-decoration: none; /* убираем подчеркивание */
}

.footer-contacts a:visited {
    color: black;
}

.footer-contacts a:hover {
    opacity: 0.7;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 120px; /* расстояние между About / CV / Works */
    margin-top: 100px;
}

.footer-nav a {
    color: black;
    text-decoration: none;
    font-size: 24px;
}

.footer-nav a:visited {
    color: black;
}

.footer-nav a:hover {
    opacity: 0.7;
}

/* ===== IMAGE VIEWER ===== */

.image-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.9); /* затемнение */

    display: none; /* по умолчанию скрыт */
    align-items: center;
    justify-content: center;

    z-index: 9999;
    cursor: zoom-out;
}

.image-viewer img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.project-gallery img {
    cursor: zoom-in;
}




@media (max-width: 1024px) {

    /* ===== ABOUT & CV TABLET TYPOGRAPHY ===== */

.project-description h2 {
    font-size: 28px; /* было ~32 → чуть меньше */
    margin-top: 36px;
    margin-bottom: 14px;
}

.project-description p {
    font-size: 24px; /* было ~22 → мягкое уменьшение */
    line-height: 1.55;
}

/* ===== TABLET FIX FOR VERTICAL POSTERS ===== */

.project-gallery-mariinsky-posters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 30px;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.project-gallery-mariinsky-posters .project-gallery-item {
    width: 100%;
    max-width: 100%;
    height: auto;
    justify-self: center;
    aspect-ratio: 620 / 877;
}

.project-gallery-mariinsky-posters .project-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* или contain, если не хочешь вообще никакой обрезки */
    display: block;
}

/* ===== PROJECT TITLES TABLET ===== */

.project-title {
    font-size: 40px; /* было ~50+ → делаем компактнее */
    margin-bottom: 60px;
}

}

@media (max-width: 768px) {

    /* ===== PROJECT PAGES MOBILE ===== */

    .project-page {
        margin-top: 60px; /* меньше верхний отступ */
        padding: 0 20px 100px 20px; /* меньше боковые отступы */
    }

    .project-title {
        font-size: 30px; /* уменьшаем заголовок проекта */
        margin-bottom: 50px;
    }

    .project-description {
        max-width: 100%;
        padding: 0 10px;
    }

    .project-description p {
        font-size: 22px; /* уменьшаем текст описания */
        line-height: 1.5;
    }

    /* ВСЕ ОБЫЧНЫЕ ГАЛЕРЕИ: теперь в 1 колонку */
    .project-gallery {
        grid-template-columns: 1fr; /* вместо 2 в ряд — одна колонка */
        width: 100%;
        max-width: 100%;
        row-gap: 30px;
        column-gap: 0;
        padding: 0;
        margin: 0 auto 60px auto;
        justify-items: center;
    }

    .project-gallery-item {
        width: 100%;
        max-width: 100%;
    }

    .project-gallery-item img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3; /* сохраняем стандартный формат */
    }

    /* ОСОБЫЙ КЕЙС TOULOUSE:
       широкая картинка тоже должна стать обычной одной колонкой */
    .project-gallery-toulouse {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        row-gap: 30px;
        column-gap: 0;
        padding: 0;
    }

    .project-gallery-toulouse .project-gallery-item-wide {
        grid-column: span 1; /* убираем растяжение на 2 колонки */
    }

    .project-gallery-toulouse .project-gallery-item-wide img {
    aspect-ratio: auto; /* убираем принудительный формат */
    height: auto; /* высота считается пропорционально */
    object-fit: contain; /* не режет картинку */
    }

    .project-gallery-mariinsky-posters .project-gallery-item {
        width: 100%;
        height: auto;
        aspect-ratio: 620 / 877;
    }


/* ===== FOOTER MOBILE ===== */

.site-footer {
    margin-top: 100px;
    padding: 0 20px 60px 20px; /* меньше отступы по краям */
}

.footer-title {
    font-size: 34px; /* меньше заголовок Contacts */
    margin-bottom: 30px;
}

.footer-line {
    margin-bottom: 30px;
}

.footer-contacts {
    gap: 24px; /* меньше расстояние между строками */
    margin-bottom: 30px;
}

.footer-contacts p {
    font-size: 18px; /* уменьшаем текст контактов */
}

.footer-nav {
    gap: 46px;
    margin-top: 45px;
}

.footer-nav a {
    font-size: 18px; /* уменьшаем About / CV / Works */
}

/* ===== PROJECT 1918 MOBILE FIX ===== */

.project-gallery-1918 .project-gallery-item img {
    aspect-ratio: auto !important;   /* убираем 16:9 */
    height: auto !important;         /* нормальная высота */
    object-fit: contain;             /* не обрезает */
}

/* ===== HEADER MOBILE: MENU 2x2 ===== */

.header {
    display: flex;
    justify-content: space-between; /* разносит лого и меню */
    align-items: flex-start;
    gap: 20px;
}

.menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 10px;
    text-align: center;
}

/* убираем старые отступы */
.menu a {
    margin: 0;
}


/* ===== ABOUT / CV MOBILE TEXT FIX ===== */

.project-page {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.project-description {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.project-description p,
.project-description h2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* CV / ABOUT headings smaller on mobile */
.project-description h2 {
    font-size: 24px;
    font-weight: 400;
    margin-top: 32px;
    margin-bottom: 12px;
}

/* main text a bit smaller and cleaner on mobile */
.project-description p {
    font-size: 18px;
    line-height: 1.5;
}

}