.hero{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
 /*   height: 796px; */
    /* background: linear-gradient(
        167deg,
        rgba(130, 245, 218, 1) 0%, 
        rgba(187, 240, 248, 1) 24%, 
        rgba(51, 197, 236, 1) 100%);
	*/
	background: #05060f;
}

.hero-content{
    position: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Раньше здесь была жёсткая width: 1496px — она растягивала документ
       на мобильных и, наоборот, обрезала секции на экранах шире 1496px.
       Колонка идёт во всю ширину экрана; ограничение ширины контента —
       забота самих секций (у каждой свой __inner с max-width). */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
}

/* align-items:center давал детям ширину по содержимому: бегущая строка
   раздувала .hero-content до 12000px, а секции с container-type
   схлопывались в 0. Секции на всю ширину колонки — единственный
   корректный вариант для этого набора блоков. */
.hero-content > *{
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.hero-content .img-ailand{
    width: min(941px, 100%);
    transform: translate(60px, 70px);
}

.hero-content .img-ocean,
.hero-content .img-park,
.hero-content .img-jungle,
.hero-content .img-ekzo,
.hero-content .img-circle {
    position: absolute;
}

.hero-content .img-ocean{
    top: 63px;
    left: -160px;
    width: 380px;
    height: 353px;
    transform: rotate(-3.403deg);
}
.hero-content .img-park{
    top: 552px;
    left: 121px;
    width: 298px;
    height: 281px;
}
.hero-content .img-ekzo{
    top: 9px;
    left: 642px;
    width: 308px;
    height: 238px;
    aspect-ratio: 22 / 17;
}
.hero-content .img-jungle{
    top: 63px;
    left: 1212px;
    width: 348px;
    height: 318px;
    aspect-ratio: 58/53;
}
.hero-content .img-circle{
    top: 443px;
    left: 1157px;
    width: 304px;
    height: 288px;
    transform: rotate(4.991deg);
    aspect-ratio: 19/18;
}

.hero-act{
    display: inline-grid;
    justify-items: center;
}

.hero-act-text p{
    color: #4A5565;
    text-align: center;
    font-family: Arimo;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0 0 23px 0;
}

.hero-act-buy{
    display: flex;
    padding: 28px;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    background: linear-gradient(90deg, #00B8DB 0%, #155DFC 100%);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    color: white;
    text-transform: uppercase;
}