That is normal behaviour of WordPress Users.
Authors only are able to edit own posts (no pages). Editors can edit all Posts and Pages.
and as an admin – well – of course everything

An Author logged in see:

Only on “mine” Posts on hovering there is an edit Button.
If you show all Posts – you can not see any edit Button at all on Posts from different Users.

Comments etc. are only listed – and can not be edited (except on own Posts) etc.

Have you installed a Plugin on influencing User Roles? I can not believe that Authors are able to see pages.

By the way @Ismael : that link to show the available Fonts “Google Webkit Fonts” does not work anymore.
Reason is that Droid Fonts and Open Sans Condensed is not listed in Google anymore.

where did you get your font from? Is it a download from Google? Offers Google a variable font on that download?

The macosx comes from those invisible files OSX is generating for a lot of files ( some are icons etc. and meta infos ). Packing these folders by OSX internal zip – these files are inside that zip too.
BetterZip for example can zip folders without those meta info files ( it is called: pack for PC ).

After your Answers – i will try to give a good explanation on how you do it.
If you downloaded an otf or ttf file – try: https://kriesi.at/support/topic/eigene-schrift-einbetten/#post-1401545

But Font-Icons are monochrom ! – if you downloaded colored Icon-Packs – then you can not use them as font-icons in Enfold.
__
the downloaded flaticons folders – do they have a svg font icon?
you can extract that svg and upload it to fontello icon: https://fontello.com/
drag and drop that svg file to “custom icons” field. I guess you can do that for each of your Icon-Packs. And make one Container File of them.

After uploading all of your svgs to that input field – activate all of them – Name your font – and download it. This zip is for uploading it to Enfold.

set up for mobile devices :

.responsive.avia_mobile #top .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry {
    right: 20px;
    bottom: 20px;
}

or if you mean for small screens – then a media-query is the means of choice instead:
f.e.:

@media screen and (max-width: 767px) {
  #top .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry {
      right: 20px;
      bottom: 20px;
  }
}

choose the large gap and place that css into your child-theme quick css:
(masonry-gallery – or do you mean the masonry-entries?)

#top .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry {
    right: 50px;
    bottom: 50px;
}

i try to find a solution for av-flex-size now…

nicht mit dem svg als img tag. Wenn da ein inline svg wäre, dann könnte man sogar auf das image overlay verzichten.
wenn du nochmal auf meine Beispielseite gehst: https://webers-testseite.de/ausgesonnen/
und dir jetzt den leicht geänderten Quellcode des svg ansiehst, dann bemerkst Du, dass jetzt jede Zeile eine eigene Klasse hat.
Diese sind via quick css ansprechbar.

.ideen-batch svg {
  width: 20vw;
  margin-left: 10vw;
} 

#av_section_1:hover .ideen-batch svg .sichtbar {
  fill: #FFF;
  transform: scale(1.2);
  transform-origin: center 90px;
}

#av_section_1 #Ideen-Kreis :not(.kreis) {
  opacity: 0;
  animation: batch 1s ease 3s forwards;
}

@media only screen and (max-width: 549px) {
  #av_section_1 {
    background-position: 75% 100%;
  }
  .ideen-batch svg,
  .ideen-batch .avia_image {
    margin-left: 3vw;
  }
}

@keyframes batch {
  to {
    opacity: 1;
  }
}

add a sufficient line-height to it:
( i think the font-size you set in the heading itself – so better is to use a relative line-height value)

h6 {
  line-height: 1.7em;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  background: linear-gradient(to right, #b04938, #ddbbae, #b8b665);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

They are part of these settings, as ismael mentioned. These 4 icons (underlined in red) give you settings for different screen widths. There is some explanatory text on the right. The only thing I set as a default is whether absolute or relative positioning is selected. I then set the values for the individual widths.

f.e. on this demo page here (the three columns with that special ampersand) : https://kriesi.at/themes/enfold-parallax/

it will make no sense for mobile view that the columns do overlap and move that parallax way. So these settings are not the same as for the desktop version.

zunächst – ist das intentional, das der Kreis zunächst ohne die Inhalte gezeigt wird?

da oben habe ich ja auch schon eine Anpassung angedeutet. Da kann natürlich auch die width mit hinein.

Hast du eigentlich wirklich die container weite auf 1130px gestellt? ( in dem Fall wäre die margin-left hier nicht nötig).

ALB Element ist Advance Layout Builder Element – also das was du in dein Layout einsetzt. z.B. Image – vielen (wenn nicht sogar alle) diese ALB Elemente haben die Option eine benutzerdefinierte Klasse zu erhalten. Also im Edit Modus dann auf Advanced Tab dort Develper Settings (bitte dort in den Eingabefeldern die Bezeichnung ohne Punkt eingeben).

Wenn Du selektiver ( und nicht bei allen masonries ) das ändern möchtest musst du eventuell mit custom classes arbeiten.
ja – du könntest den dunklen overlay dunkler machen, oder du entscheidest dich – das Bild bei hover zu soften:
_______

If you want to change this more selectively (and not for all masonries), you may need to work with custom classes.
Yes – you could make the dark overlay darker, or you could decide to soften the image on hover:

#top #wrap_all .all_colors .av-masonry-entry h3 {
  color: #FFF;
}

#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

i guess you have done that as mentioned above – but – more and more i do believe that your installation is a bit buggy.
Compare mine and your DOM concerning to this :
(click to enlarge)

f.e. see mine: aria-label="Suche" is corrupted on yours to aria="-" label="Поиск"

or:  
// a split of  
data-avia-search-tooltip="
// to
data="-" avia="-" search="-" tooltip="

and so on … – that’s strange – maybe a mod needs to look into your installation to see what’s causing this behaviour.

it seems that every data- is tilted from the DOM there – f.e. data-av_icon="" is on your DOM : av_icon=””
( btw. that is the magnifier ) ???
Try to disable all plugins – refresh all cachings and have a look if it then o.k.
And then reactivate your plugins step by step – always checking whether the error occurs again.

it is not in the wordpress folder – it is inside the enfold folder : includes

you have changed the value of that input field.
How did you do that?

But you can bring back the magnifier by :

#top .avia_search_element #searchsubmit {
  padding-left: 1.3em;
}

#top .avia_search_element .av_searchsubmit_wrapper::before {
  content: "\e803";
  font-family: "entypo-fontello";
  font-size: 18px;
  color: #FFF;
  position: relative;
  left: 10px;
  top: 2px;
  width: 40px;
  z-index: 3;
  padding-left: 0.7em;
  font-weight: 400
}