Вообщем я разобрался частично, проблема была здесь:
$text = '
<body>
<div style="background-image:url(http://test104.ru/images/letter/back.png);width:800px;height:600px;">
<div style="width:53%;height:100%;">
<h1 style="text-align:center; font-family: bernier; color:white; letter-spacing:2px;">ПРИВЕТ!</h1>
<center><span style="color:white;font-size:17px;font-family:bernier;">МЕСТО В BFB НА ' . $date . '</span><br>
<span style="color:white;font-size:17px;font-family:bernier;">ДЛЯ ' . $numberOfGuests . ' БАЙКЕРОВ ГАРАНТИРОВАННО!</span>
<h2 style="padding:0px;color:white;font-family: bernier;">Дальше:</h2></center>
<center><span style="color:white;font-size:20px;font-family:bernier;">1. ЗАВОДИ МОТИК</span></center>
<center><span style="color:white;font-size:20px;font-family:bernier;">2. ТЕБЕ <a href="http://barforbikers.ru/location.html" style="text-decoration: none; color:red; text-shadow:1px 1px 2px black, 0 0 1em red;">СЮДА</a></span></center>
<center><span style="color:white;font-size:20px;font-family:bernier;">3. ВОТ ТЕБЕ <a href="http://barforbikers.ru/menu.html" style="text-decoration: none; color:red; text-shadow:1px 1px 2px black, 0 0 1em red;">ХЛЕБА</a></span></center>
<center><span style="color:white;font-size:20px;font-family:bernier;">4. ВОТ ТЕБЕ <a href="http://barforbikers.ru/events.html" style="text-decoration: none; color:red; text-shadow:1px 1px 2px black, 0 0 1em red;">ЗРЕЛИЩ</a></span></center>
<center><p style="color:white;font-size:20px;font-family:bernier;">ПОЧУВСТВУЙ ВКУС СВОБОДЫ</p>
<img src="cid:LogoWhite.png" style="width:150px; @media(max-width: 400px){width="30px;}">
<p style="color:white;font-size:17px;font-family:bernier;">P.S.:ВЫПИЛ? ЗА РУЛЬ НЕ САДИСЬ!<br> А ДЛЯ ВСЕГО ОСТАЛЬНОГО ЕСТЬ МОТОЭВАКУАТОР!</p></center>
</div>
</div>
</body>
';
Во первых, описания стиля для каждого элемента нужно дописывать в нём с помощью тега style
Во вторых, интерпритатор на веб мэйлах, не читает % - так что старайтесь в коде их избегать.
В третьих $message .= "Content-type: text/html;\r\n"; - тут должно быть html вместо plain.
Единственное, ещё не знаю работает ли тэг media - потому что для мобильных устройств в частности для iphone отражается не правильное разрешение.
Спасибо большое за предыдущий комментарий, но я если честно не очень понимаю как применять это на практике? То есть задумка в том, чтобы выстроить "дерево" страницы и как-то передавать на почтовые агенты зашифрованный html (div-ов) ? Просто не понятно, на что влияют это режимы?