/* BLOCK: Our Focus */

.block-our-focus .text-content > * {
    margin-block: 0 2.5rem;
}

.block-our-focus .text-content > :is(h1, h2, h3, .h1, .h2, .h3) {
    margin-bottom: 3.125rem;
}

.block-our-focus .text-content > :last-child {
    margin-bottom: 0 !important;
}

.block-our-focus .text-content p {
    max-width: 52rem;
}

.block-our-focus:not(:is(.bg-default, .bg-white, .bg-light-grey)) .text-content p {
    opacity: 0.8;
}

.block-our-focus .cta-buttons {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.block-our-focus .cta-buttons:not(:first-child) {
    margin-top: 3.125rem;
}

.block-our-focus .items-wrapper {
    --gap: 1.875rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.block-our-focus .items-wrapper:not(:first-child) {
    margin-top: 4.6875rem;
}

.block-our-focus .items-wrapper .item {
    flex-basis: calc(50% - var(--gap) / 2);
    flex-grow: 1;
    background-color: #F3F4F7;
    padding: 2.5rem;
    border-radius: 4px;
    display: flex;
    gap: 3.125rem;
}

.block-our-focus:not(:is(.bg-default, .bg-white, .bg-light-grey)) .items-wrapper .item {
    background-color: rgb(255 255 255 / 0.05);
}

.block-our-focus .items-wrapper .item--full-width {
    flex-basis: 100%;
    align-items: center;
    gap: 2.5rem;
}

.block-our-focus .items-wrapper .item-icon {
    flex-shrink: 0;
    color: var(--c-primary);
}

.block-our-focus .items-wrapper .item-icon svg {
    width: 100%;
    max-width: 3.125rem;
    height: 100%;
    max-height: 3.125rem;
}

.block-our-focus .items-wrapper .item-link {
    display: flex;
    gap: 0.625rem;
    text-decoration: none;
    flex-wrap: wrap;
}

.block-our-focus .items-wrapper .item-link svg {
    flex-shrink: 0;
    color: var(--c-secondary);
    width: 100%;
    max-width: 0.75rem;
    height: 100%;
    max-height: 0.75rem;
    transition: 300ms ease-out;
    transition-property: transform, color;
}

.block-our-focus:not(:is(.bg-default, .bg-white, .bg-light-grey)) .items-wrapper .item-link svg {
    color: var(--c-text-light);
}

.block-our-focus .items-wrapper .item-link:is(:hover, :focus, :focus-within) svg {
    transform: translate(6px, -6px);
}

.block-our-focus .items-wrapper .item-description {
    color: #47517B;
    font-size: var(--font-17-15);
    margin-block: 1.875rem 0;
}

.block-our-focus:not(:is(.bg-default, .bg-white, .bg-light-grey)) .items-wrapper .item-description {
    color: #D1D2D7;
}

.block-our-focus .items-wrapper .item--full-width .item-description {
    margin-block: 0;
    max-width: 40rem;
}

.block-our-focus .items-wrapper .item--full-width .btn {
    margin-left: auto;
}

@media screen and (width <= 920px) {
    .block-our-focus .text-content > * {
        margin-bottom: 1.5rem;
    }
    .block-our-focus .text-content > :is(h1, h2, h3, .h1, .h2, .h3) {
        margin-bottom: 2.5rem;
    }
    .block-our-focus .cta-buttons:not(:first-child) {
        margin-top: 2.5rem;
    }
    .block-our-focus .items-wrapper {
        gap: 0.75rem;
    }
    .block-our-focus .items-wrapper:not(:first-child) {
        margin-top: 3.75rem;
    }
    .block-our-focus .items-wrapper .item {
        flex-basis: 100%;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 1.875rem;
        padding: 1.875rem;
    }
    .block-our-focus .items-wrapper .item--full-width {
        flex-direction: column;
    }
    .block-our-focus .items-wrapper .item-icon svg {
        max-width: 2.5rem;
        max-height: 2.5rem;
    }
    .block-our-focus .items-wrapper .item-description {
        margin-top: 1.5rem;
    }
    .block-our-focus .items-wrapper .item--full-width .btn {
        margin-left: 0;
    }
}