.features {
    position: relative;
}

.features__blockTitle {
    margin-bottom: 16px;
}

.features__background {
    left: 20px;
    top: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background-color: black;
    opacity: 40%;
    position: absolute;
}

.features__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.features__content {
    position: absolute;
    left: 20px;
    top: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    z-index: 2;
    padding: 40px;
}

.features__list {
    gap: 32px;
    min-height: 0;
    margin-top: 32px;
}

.features__row {
    width: 100%;
    min-height: 0;
}

.features__item {
    min-width: 0;
    min-height: 0;
    padding: 20px 24px;
    padding-right: 15px;
    position: relative;
    background-color: #ffffff33;
    backdrop-filter: blur(3px);
    border-left: 1px solid #ffffffb2;
    overflow-wrap: break-word;
}

.features__itemTitle {
    margin-bottom: 12px;
    max-width: calc(100% - 44px);
}

.features__itemText {
    font-weight: 300;
}

.features__itemIcon {
    position: absolute;
    top: 20px;
    right: 24px;
}

@media (min-width: 1451px) {
    .features__list.d-show {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        flex: 1;
        gap: 32px;
    }

    .features__list.d-show > .features__row {
        display: contents;
    }

    .features__list.d-show .features__itemHelp {
        grid-column: 1;
        grid-row: 1;
    }

    .features__list.d-show .features__conditions {
        grid-column: 3;
        grid-row: 1;
    }

    .features__list.d-show .features__escort {
        grid-column: 2;
        grid-row: 2;
    }

    .features__list.d-show .features__approach {
        grid-column: 4;
        grid-row: 3;
    }
}

@media (min-width: 1451px) and (max-width: 1639px) {
    .features__preview {
        height: auto;
        min-height: clamp(640px, 56vw, 820px);
    }

    .features__background,
    .features__content {
        left: clamp(8px, 1.5vw, 20px);
        top: clamp(8px, 1.5vw, 20px);
        width: calc(100% - 2 * clamp(8px, 1.5vw, 20px));
        height: calc(100% - 2 * clamp(8px, 1.5vw, 20px));
    }

    .features__content {
        padding: clamp(16px, 2vw, 40px);
    }

    .features__content .heading-h3 {
        font-size: clamp(32px, 3.2vw, 48px);
        line-height: clamp(38px, 3.8vw, 56px);
    }

    .features__blockTitle {
        margin-bottom: clamp(8px, 1vw, 16px);
    }

    .features__list.d-show {
        grid-template-rows: repeat(3, auto);
        align-content: start;
        gap: clamp(12px, 1.6vw, 32px);
        margin-top: clamp(12px, 1.6vw, 32px);
        flex: unset;
    }

    .features__list.d-show .features__item {
        padding: clamp(12px, 1.2vw, 20px) clamp(14px, 1.5vw, 24px);
        padding-right: clamp(12px, 1.2vw, 15px);
    }

    .features__list.d-show .features__itemIcon {
        top: clamp(12px, 1.2vw, 20px);
        right: clamp(14px, 1.5vw, 24px);
    }

    .features__list.d-show .features__item br {
        display: none;
    }
}

@media (max-width: 1450px) {
    .features__preview {
        min-height: 504px;
    }

    .features__background {
        top: 8px;
        left: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
    }

    .features__content {
        left: 8px;
        top: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
    }

    .features__content {
        padding: 12px;
    }

    .features__list {
        gap: 16px;
    }

    .features__row {
        display: flex;
        gap: 16px;
        flex: unset;
        height: 154px;
        flex-shrink: 0;
    }

    .features__item {
        width: 100%;
        height: 154px;
        padding: 16px;
    }
}

@media (max-width: 550px) {
    .features__preview {
        min-height: 888px;
    }

    .features__row {
        flex: unset;
        height: unset;
    }

    .features__item {
        width: 100%;
        height: 154px;
        min-height: 154px;
        padding: 16px;
    }
}
