.unlocking-assets {
    /* margin → .section utility class */
}
.unlocking-assets .container__inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.unlocking-assets__header {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.unlocking-assets__header p {
    max-width: calc(var(--pixel) * 847);
}

.unlocking-assets__numbers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
}

.unlocking-assets__numbers__el {
    display: flex;
    flex-direction: row;
    gap: var(--gap-md);
    padding-top: var(--space-4);
    padding-bottom: calc(var(--pixel) * 35);
    border-bottom: solid 1px var(--color-light-grey);
    max-height: 90px;
}

.unlocking-assets__numbers .unlocking-assets__numbers__el:first-child {
    padding-top: 0;
}

.unlocking-assets__number {
    color: var(--color-solar-gold);
}

.unlocking-assets__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
}

.unlocking-assets__grid__el {
    /* structure + border → .feature-card .feature-card--bordered */
    padding: calc(var(--pixel) * 25);
    gap: 20px;
}

.unlocking-assets__grid__el .hr {
    width: 27%;
    /* height and color → .hr base in design-system/components/divider.css */
}

@media (max-width: 1439px) {
    .unlocking-assets__header p {
        max-width: unset;
    }

    .unlocking-assets__numbers {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }

    .unlocking-assets__numbers__el {
        max-height: calc(var(--pixel) * 90);
    }

    .unlocking-assets__numbers__el:nth-child(1) {
        order: 1;
    }
    .unlocking-assets__numbers__el:nth-child(2) {
        order: 3;
    }
    .unlocking-assets__numbers__el:nth-child(3) {
        order: 2;
    }
    .unlocking-assets__numbers__el:nth-child(4) {
        order: 4;
    }

    .unlocking-assets__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .unlocking-assets__grid__el {
        padding: calc(var(--pixel) * 20);
        padding-bottom: 0;
        height: calc(var(--pixel) * 165);
    }
}

@media (max-width: 767px) {
    .unlocking-assets__numbers {
        gap: 0;
    }

    .unlocking-assets__numbers__el {
        flex-direction: column;
        gap: 15px;
        padding-top: 20px;
        padding-bottom: 20px;
        max-height: unset;
    }

    .unlocking-assets__numbers .unlocking-assets__numbers__el:first-child {
        padding-top: 0;
    }

    .unlocking-assets__grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .unlocking-assets__grid__el {
        border: solid 1px var(--color-solar-gold);
        padding: calc(var(--pixel) * 20);
        padding-bottom: 0;
        gap: 15px;
        height: calc(var(--pixel) * 170);
    }

    .unlocking-assets__grid__el .hr {
        width: 37%;
    }

    .unlocking-assets .container__inner {
        gap: 45px;
    }
}