/* Все существующие стили из файла (включая вставки PHP) */

.aboutSun {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.sunbrick {
    box-sizing: border-box;
    margin-bottom: 20px;
    flex: 1 1 100%;
}

/* Горизонтальное расположение на больших экранах */
@media (min-width: 1024px) {
    .sunbrick {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
    
    .aboutSun {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

#symbols {
    padding: 5px;
    font-size: 1.5em;
    height: fit-content;
    font-weight: bold;
    border-radius: 10px;
    position: absolute;
}

/* Мобильные устройства */
<?PHP if (isMobileDevice()) { ?>
.brick p {
    font-size: 160% !important;
}
<?PHP } ?>

/* Стили для FAQ */
ol#faq {
    list-style: none;
    counter-reset: li;
    padding: 0 !important;
    margin-left: 0;
    text-align: justify;
}

ol#faq li {
    position: relative;
    padding: 0 0 3px 35px;
    margin-bottom: 7px;
}

ol#faq li::before {
    counter-increment: li;
    content: counters(li, ".") ".";
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    text-align: right;
    font-weight: bold;
}

.faq {
    text-align: justify;
}

/* Адаптивные стили */
@media screen and (max-width: 1200px) {
    div.firstColumn > * {
        display: none;
    }
    
    div.firstColumn {
        display: none;
        width: 0%;
    }
}

@media only screen and (min-width: 1024px) {
    .desc {
        font-size: 1.25em;
    }

    .intro {
        letter-spacing: 1px;
    }

    #sun {
        column-count: 2;
    }
}

/* Стили для верхних индексов */
sup {
    position: relative;
    top: -0.5em;
    vertical-align: baseline;
    font-size: 0.75em;
    line-height: 0;
    text-decoration: none;
}

sup a {
    position: relative;
    top: 0.15em;
    display: inline-block;
}

/* The title */
.title {
    font-weight: 700;
}

/* The description */
.desc {
    font-size: 1em;
    font-style: italic;
    font-family: Georgia, serif;
}

/* Text-centering */
.title,
.desc,
.intro {
    text-align: center;
}

/* Intro section */
.intro {
    margin: 1.75em 0 .75em;
    margin-bottom: 1.75em;
}

.intro a {
    opacity: .7;
}

.intro a:hover {
    opacity: 1;
}

.intro h3 {
    font-size: .825em;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin: .25em .75em .75em;
}

.intro h3 a {
    font-weight: 400;
}

.container {
    text-align: justify;
}

/* ---------- Исправленный masonry с учётом ориентации ---------- */
.masonry {
    transition: all .5s ease-in-out;
    column-gap: 20px;       /* достаточный отступ между колонками */
    column-fill: initial;
    box-sizing: border-box;
}

/* Masonry item */
.masonry .brick {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    vertical-align: top;
    box-sizing: border-box;
    break-inside: avoid;            /* предотвращает разрыв элемента */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

/* По умолчанию (мобильные) – одна колонка */
.masonry {
    column-count: 1;
}

/* Планшеты в портретной ориентации (вертикально) – 2 колонки */
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .masonry {
        column-count: 2 !important;
    }
}

/* Планшеты в ландшафтной ориентации (горизонтально) – 3 колонки */
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .masonry {
        column-count: 3;
    }
}

/* Большие экраны (десктопы) – по умолчанию 3 колонки (можно оставить 2, если нужно, но по логике горизонтального iPad – 3) */
@media only screen and (min-width: 1024px) {
    .masonry {
        column-count: 3;
    }
}

/* Bordered masonry – опционально */
.masonry.bordered {
    column-rule: 1px solid #eee;
    column-gap: 50px;
}

.masonry.bordered .brick {
    padding-bottom: 25px;
    margin-bottom: 25px;
}

/* Gutterless masonry */
.masonry.gutterless {
    column-gap: 0;
}

.masonry.gutterless .brick {
    margin-bottom: 0;
}