.strip-wrapper {
    position: relative;
}

.strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 24px 0;
}

.strip .box {
    display: flex;
    align-items: flex-start;
    width: max-content;
    align-items: center;
}

.strip .box .icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #0504aa14;
    color: #0504aa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.strip .box .icon.mujer {
    background: #c84fa81a;
    color: #c84fa8;
}

.strip .box .icon svg {
    width: 24px;
    height: 24px;
}

.strip .box .text {
    margin: 0 20px 0 10px;
}

.strip .box .text strong {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: #02016f;
    margin-bottom: 2px;
}

.strip .box .text span {
    font-size: .8rem;
    color: #4f5c76;
}

.arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #0504aa1f;
    box-shadow: 0 18px 48px rgba(5, 4, 42, 0.12);
    color: #0504aa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.arrow svg {
    width: 18px;
    height: 18px;
}

.arrow-left,
.arrow-right {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
}

.arrow-left {
    left: -5px;
}

.arrow-right {
    right: -5px;
}

/* lg */
@media (max-width: 991.98px) {

    .strip-wrapper {
        padding: 0 10px;
    }

    .strip {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-right: 55px;
    }

    .strip::-webkit-scrollbar {
        display: none;
    }

    .strip .box {
        flex: 0 0 auto;
    }

    .arrow.is-visible {
        display: inline-flex;
    }
}