/* USP's block */

.block-usps {
    --usps-gap: 5rem;

    background-color: var(--wp--preset--color--white);
    border-radius: var(--radius-06);
}

.block-usps__inner {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--80);
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) var(--wp--preset--spacing--80);
}

.block-usps__title {
    margin: 0;
    text-align: center;
    text-wrap: balance;
}

/* Grid */

.block-usps__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.block-usps__item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.block-usps__number {
    margin: 0;
    line-height: 0.9;
}

.block-usps__item-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* Square marker to the left of the title */
.block-usps__marker {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-02);
    background-color: var(--wp--preset--color--helder-blauw);
}

.block-usps__text > :first-child {
    margin-top: 0;
}

.block-usps__text > :last-child {
    margin-bottom: 0;
}

/* Desktop */

@media (min-width: 782px) {
    .block-usps {
        --usps-gap: 50px;
    }

    .block-usps__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* !important so it wins over the alignwide max-width, whichever order
           the layout stylesheets land in */
        max-width: 70rem !important;
    }
}