alex

@media print {
    .buttons, footer { display: none; }
}

.portfolio__case {
  transform: translateY(0px);
  transition: transform ease .1s;
}

.portfolio__case:hover .portfolio__button {
  display: block;
  transform: translateY(-1px);
}

object-fit: cover


object-fit: contain

.main-header__icon--like:hover:after{
  background-color: blue;
}

<a id="toTop">&#10148;</a>

        <meta http-equiv="imagetoolbar" content="no"><!-- disable image toolbar (if any) -->
        <script type="text/javascript">
            /*<![CDATA[*/
            document.oncontextmenu = function() {
                return false;
            };
            
            // ---удалить это---
            document.onselectstart = function() {
                if (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password") {
                    return false;
                }
                else {
                    return true;
                }
            };
            // -------

            // ---и это---
            if (window.sidebar) {
                document.onmousedown = function(e) {
                    var obj = e.target;
                    if (obj.tagName.toUpperCase() == 'SELECT'
                            || obj.tagName.toUpperCase() == "INPUT"
                            || obj.tagName.toUpperCase() == "TEXTAREA"
                            || obj.tagName.toUpperCase() == "PASSWORD") {
                        return true;
                    }
                    else {
                        return false;
                    }
                };
            }
            // ------

            document.ondragstart = function() {
                return false;
            };
            /*]]>*/
        </script>

input[name=name]:focus, 
textarea[name=text]:focus{
  box-shadow: 0 0 10px 4px #000;
}

судя по вопросу вы все это дело задаете через js.
т.к. песочницу вы не дали, то вангую что это у вас происходит примерно так:

b.style.transition = "all 1s cubic-bezier(0.5,-0.5,0.5,1.5)";
b.style.opacity = "0";
b.style.transform = "scale(2)";

если это так, то это может не работать из-за оптимизаций браузерного рендера. нужно насильно спровоцировать repaint брузера. сделать это можно вот так например:

b.style.transition = "all 1s cubic-bezier(0.5,-0.5,0.5,1.5)";
b.clientWidth; //запрашиваем свойство, тем-самым провоцируем repaint
b.style.opacity = "0";
b.style.transform = "scale(2)";

document.querySelectorAll('[name=equal]')[2]

Надеюсь дальше сами додумаете

еще так можно:

#garden {
  grid-template-rows: repeat(4, 12.5px) 1fr;
}

У меня проблема с 3 и 6 положением:

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

для того чтобы единицу запихнуть в середину, нужно боксы блоков сделать инлайновыми:

.test {
  display: inline-block;
}

тогда 3 и 5 вариаты будут выглядеть так:

// 3
<div class="wrap oh">
  <div class="test fl">1</div>
  <div class="test no">2</div>
  <div class="test fr">3</div>
</div>

// 5
<div class="wrap oh">
  <div class="test no">1</div>
  <div class="test fr">2</div>
  <div class="test fl">3</div>
</div>

.content-section {
  flex-wrap: wrap;
}