html, body {
    overflow-x: clip !important;
    overflow-x: unset !important;
    position: relative;
}

#hero {
    padding-block: 10rem;
    background: linear-gradient(
        135deg,
        var(--blue5B),
        var(--blue4A)
    );
}
#hero .-main-box {
    min-height: 55dvh;

    display: grid;
    place-items: center;
    place-content: center;
    gap: 4.2rem;
}
#hero h1 {
    margin-inline: auto;
    max-width: 18ch;

    font-size: 7.2rem;
    line-height: 0.75;
    color: var(--yellow);
    text-align: center;
}
#hero p.text {
    margin-inline: auto;
    max-width: 60rem;

    font-size: 2rem;
    text-align: center;
    color: var(--font-col-600);
}

#hero ul {
    list-style: none;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.6rem;
}
#hero ul li {
    padding: 1rem 2.4rem 1rem 1.2rem;

    display: flex;
    align-items: center;
    gap: 1.2rem;

    background-color: #ffffff33;
    border: 2px solid #ffffff4d;
    border-radius: 5rem;
}

#hero ul li:is(:hover, :focus-within) {
    border-color: var(--yellow);
    & > * {
        color: var(--font-col-600);
    }
}

#hero ul li .strong-ico {
    width: 3.8rem;
    background-color: var(--yellow);
    border-radius: 50%;
}
#hero ul li svg {
    color: #000;
}
#hero ul li a,
#hero ul li span {
    font-size: 1.4rem;
    color: var(--font-col-400);
    transition: color 0.25s;
    user-select: none;
}