Alex

А зачем там абсолютное позиционирование?

wrapper .content {
    margin: 69px 20px 0px 20px;

}
wrapper .content .block {
    width: 292px;
    
    float: left;

    margin: 0 10px 58px 10px;
}
wrapper .content .block .inner {
 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
wrapper .content .block .image {
    width: 292px;
    height: 292px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}
wrapper .content .block .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 263px;
    margin: 0 auto;
    text-align: center;
}
wrapper .content .block .text h3 {
    font-family: LatoBold;
    font-size: 16px;
}
wrapper .content .block .text h3 span {
    letter-spacing: 2px;
}
wrapper .content .block .text>span {
    font-family: LatoRegular;
    font-size: 14px;
    line-height: 25px;
}
wrapper .content .block .inner:hover {
    margin: -20px -24px -102px -24px;
    z-index: 1;
    border: 5px solid #d5223d;
    background-color: #fff;
    box-shadow: 3px 5px 20px 0.00px rgba(0, 0, 0, 0.19);
}
wrapper .content .block .inner:hover .text .button{
    display: block;
}
wrapper .content .block .inner:hover .image {
    margin: auto;
    position: relative;
    top: 15px;
}
wrapper .content .block .inner:hover .text {
    margin-top: 15px;
}
wrapper .content .block .text .button{
    margin-top: 31px; 
    width: 292px;
    height: 50px;
    background-color: #d5223d;
    color: white;
    text-decoration: none;
    font-family: LatoBold;
    font-size: 16px;
    text-align: center;
    padding-top: 15px;
    box-sizing: border-box;
    letter-spacing: 2px;
    display: none;
    
}

Как вариант, изображение вставляется в размере пропорциональном вставляемому.

Т.е. если вы вставляете картинку 100х100 в картинку 1000х1000 то 100х100 будет маленькая.

Перед вставкой убедитесь, что просмотр и одно и второго изображения у Вас 100% величины.

Зачем тут jquery если не используется
И картинки с левых ресурсов?
Удали зависимости... быстрее стало?

Говнокод в студию codepen.io/anon/pen/JGLMxq

На сколько я помню, была такая игрушка, Ingress.
Она чекала по наличию апов, позволяющих изменять геолокацию.

А вот в браузере... я думаю будет нереально.

а чем SSRS сложен?

Вот такая же беда у меня. Пока думаю как бороться.
Видимо, выше есть еще несколько элементов. И один из них, по высоте меньше остальных ....

https://pages.github.com/
?

AngularJS в руки

В css для DIV background image укажите

Посмотрите в сторону версии выставленной в панели...
Обычно, если открытие панели влияет на работу сайта, то режим совместимости отличается в панели и в "бою".

ANGULAR.JS в тегах явно лишний. Легкий сайт на нем не развернешь.
Я для подобного решения писал сам. Взял Slim и Bootstrap + jQuery. Может сейчас закидают тряпками, но работает шустро и адаптивно.
Админку сделал наколеночно, но на то она и админка, что в ней человек нарочно ломать ничего не будет.

Вот чешу периодически голову, может все это на WordPress надо было сделать ибо было бы быстрее в разработке. Но WP не знаком и не знаю камней.

Вставлю свои 5 копеек.
А Выравнивание 4k пробовали делать?

Ну как вариант, на сервере сделать табличку, в которую генерируется рандомное имя файла и в страницу скрипт с этим именем вставлять динамически.
Сервер пусть проверяет, если по такому имени уже спрашивали файл, отдавать шиш.

Там наработка вокруг imakewebthings.com/waypoints
Ну а вообще таких плагинов Jquery куча. Google в помощь

plnkr.co/edit/ocVMIbtolGQfdVKBkJX4?p=preview

так?

Решил как смог )

function summ(a){
 if(a.length==0){return 0}
 else{res = 0; for(var i=0;i<a.length;i++){res=res+a[i]} return res;}
}
 var ar = [5, 7, 12, 3, 3, 1, 5]; 
ar=ar.sort(function(a, b){return a-b}); 
var b=[];
var c =[];
 var d=[]; 
for(var i=ar.length-1;i>-1;i--){
if(summ(b)+ar[i]<=summ(ar)/3) {b.push(ar[i])}
else if(summ(c)+ar[i]<=summ(ar)/3) {c.push(ar[i])}
else if(summ(d)+ar[i]<=summ(ar)/3) {d.push(ar[i])}}; 
console.log(b);console.log(c);console.log(d)

Чет мне кажется что не всегда будет работать)