Николай Гаврилович

Выкладываю свое решение, на чистый код не претендую, но как костыль или помощь в осознании подойдет.

url_login = 'http://mysite.com/login'
url_main = 'http://mysite.com/'

client = requests.session()
html = client.get(url_login)
cookies = html.cookies.get_dict()
soup = BeautifulSoup(html.text, 'lxml')

login_csrf = soup.find('input', dict(name='_csrf'))['value']

payload = {
    'LoginForm[username]': '******',
    'LoginForm[password]': '******',
    'LoginForm[rememberMe]': 1,
    '_csrf': login_csrf
}

headers = {
    'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
    'Accept-Encoding': 'gzip, deflate',
    'Accept-Language': 'ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)  Safari/537.36',
    'Referer': url_main,
    'Connection': 'keep-alive',
}

r = requests.post(url_login, cookies=cookies, data=payload, headers=headers)

print(r.status_code)
print(r.url)

для шрифта попробуй em, ww или wh
И никто не тестит верстку на уменьшении масштаба в окне, открой консоль разработчика там есть размеры под разные экраны. Если уменьшать размер экрана, то viewport не отрабатывает

Вот дока fancybox, там все написано
fancyapps.com/fancybox/3/docs/#images
Скрываешь нужные изображения css-ом и добавляешь к ним data-fancybox="images", и к видимой картинке тоже data-fancybox="images". Итог: при нажатии на видимую картинку в превьюшках будут все изображения с атрибутом data-fancybox="images". Если надо чтобы картинки открывали разные галереи, то добавляешь разные атрибуты (data-fancybox="images", data-fancybox="images2")