.hmonetize {
    margin: var(--section-margin) 0;
}

.hmonetize__inner {
    padding: var(--card-padding);
    background: var(--color-bg-light-accent);
    border-radius: 32px;
}

.hmonetize__head {
    max-width: 800px;
    margin: 0 auto clamp(30px, 4vw, 60px);
    text-align: center;
}

.hmonetize__title {
    margin-bottom: 20px;
    text-wrap: balance;
}

.hmonetize__title span {
    position: relative;
    display: inline-block;
    color: var(--color-accent);
    white-space: nowrap;
}

.hmonetize__title .c-around {
    padding: 0 0.25em;
}

.hmonetize__title .c-around:before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkwIiBoZWlnaHQ9Ijk3IiB2aWV3Qm94PSIwIDAgMTkwIDk3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTU5LjQyMSA2OS4yMzI2QzE1OS40MjEgNzAuMDEwNCAxNTMuODkgNzIuMjI4OCAxMzcuNjQ3IDc1LjA0NDFDMTI3LjI1OSA3Ni44NDQ1IDExMS4yMDkgNzYuMTYzNyA5OS4xMTQzIDc1Ljg0NThDODcuMDE5NCA3NS41Mjc4IDc5LjAzMTYgNzQuNzY2MSA3MC4yNzg4IDczLjU2MzZDNjEuNTI2MSA3Mi4zNjEyIDUyLjI1MDQgNzAuNzQxMSA0NC41OTg2IDY4Ljc5MDFDMzAuNjU3MSA2NS4yMzUzIDIwLjEwMyA1OS4zNTQgMTEuNDAzIDU0LjE0NTFDNS42MjQ2IDUwLjY4NTUgMy40MTIzNiA0Ni44Nzk3IDEuOTIyMzUgNDIuNzUxM0MwLjQxNDUwMSAzOC41NzM0IDMuMTk2MDMgMzIuNTUyIDYuMjg0MjMgMjYuMzkxOUM4LjAzNzEgMjIuODk1NCAxNC45Njc5IDE4LjYyOTcgMjQuNjQyOCAxMy4zMDI0QzI5Ljk5NTkgMTAuMzU0OCA0NC44OTQzIDcuNjE2ODMgNjUuMzgwMiA0LjA5NjU2QzczLjE0MjQgMi43NjI3MyA3NS42NzY4IDIuNTgxNjMgODUuMDYwMyAyLjIzNzQ5Qzk0LjQ0MzcgMS44OTMzNCAxMTAuNjMgMS40NTE0MyAxMjAuODUzIDEuNTA0MzRDMTM0Ljg4NCAxLjU3Njk1IDE0My40ODQgMy44NjUyMiAxNTMuMjcgNi43NTEzOEMxNjQuMjA0IDkuOTc2MjEgMTcwLjY0NyAxNC4wNzQxIDE3NS4zMjUgMTcuMzIxMkMxODIuNjA0IDIyLjM3MzQgMTg2LjE3MSAyNy4yMDU2IDE4Ny4zMDUgMzAuMDIyOEMxODguODE1IDMzLjc3NjMgMTg4LjcyOSAzOS4wNTcgMTg3Ljk1NiA0NS42ODU5QzE4Ny4wNDIgNTMuNTI4OSAxODEuNzI1IDYwLjU3NzYgMTc1LjQyNCA2Ni43ODgyQzE3MS44OSA3MC4yNzE5IDE2NS44NzUgNzMuNzc4NyAxNTcuMTY4IDc3Ljg0MDJDMTM3LjY5NCA4Ni45MjQ0IDEyMi40NiA5MS4zMTg3IDExNS44NTUgOTIuNzE0NkMxMTEuNTQ3IDkzLjUxMjIgMTA1LjI5NiA5NC40OTEzIDEwMS40MjUgOTQuOTk1NkM5Ny41NTQyIDk1LjUgOTYuMjUyMyA5NS41IDk0LjkxMSA5NS41IiBzdHJva2U9IiNGRjY4MDkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPg==") no-repeat center/100% 100%;
    pointer-events: none;
    transform: translate(3px, 12px);
}

.hmonetize__snippet {
    color: var(--color-text-main);
    max-width: 718px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
}



.hmonetize__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.hmonetize__item {
    padding: var(--card-padding);
    background: #fff;
    border-radius: 32px;
    text-align: center;
}

.hmonetize__icon {
    width: clamp(48px,7vw,90px);
    height: clamp(48px,7vw,90px);
    flex: 0 0 clamp(48px,7vw,90px);
    margin: 0 auto 32px;
    border-radius: 100%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hmonetize__icon img {
    width: clamp(24px,2.5vw,40px);
    height: clamp(24px,2.5vw,40px);
    object-fit: contain;
}

.hmonetize__item-title {
    margin-bottom: 12px;
    font-size: clamp(18px, 2vw, 24px);
}

.hmonetize__item-text {
    font-size: clamp(16px,1.75vw,20px);
    line-height: 1.3;
}

.hmonetize__item-text strong {
    font-weight: inherit;
}

.hmonetize__action {
    margin-top: clamp(20px, 3vw, 40px);
    text-align: center;
}

@media (width < 992px){
    .hmonetize__title span {
        padding: 0 !important;
        display: inline;
        white-space: initial;
    }
    
    .hmonetize__title span:before {
        display: none;
    }

    .hmonetize__grid {
        grid-template-columns: minmax(0,1fr);
    }

    .hmonetize__item {
        display: flex;
        align-items: center;
        gap: 20px;
        text-align: left;
    }

    .hmonetize__icon {
        margin: 0;
    }
}

@media (width < 768px) {
    .hmonetize__item {
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
        padding: 16px;
    }

    .hmonetize__icon {
        margin: 0;
    }

    .hmonetize__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hmonetize__snippet {
        gap: 0;
    }

    .hmonetize--detail .hmonetize__item {
        align-items: flex-start;
    }

    .hmonetize--detail .hmonetize__item-title {
        min-height: 48px;
        align-items: center;
        display: flex;
    }
    
    .hmonetize--detail .hmonetize__item-text {
        margin-left: -56px;
    }

    .hmonetize--compact .hmonetize__item {
        align-items: flex-start;
    }

    .hmonetize--compact .hmonetize__item-title {
        display: none;
    }

    .hmonetize--compact .hmonetize__item-text strong {
        font-weight: bold;
    }
}

@media (width < 576px) {
    .hmonetize__action .btn {
        width: 100%;
    }

    .hmonetize__title br {
        display: none;
    }
}