@wrap-box-padding: 10px;
@wrap-box-item-gap: 15px;

.wrap-box {
    display: flex;
    flex-direction: column;

    @media @query-lg {
        flex-direction: row;
    }

    &__half {
        flex-direction: column;
        width: 100%;
        padding: @wrap-box-padding;
        margin-bottom: @wrap-box-item-gap;

        border-radius: @radius;
        background-color: @color-f;

        @media @query-lg {
            flex-direction: row;
            width: 100%/2;
        }

        &--in-row {
            @media @query-lg {
                width: calc(~"100%/2 - @{wrap-box-item-gap}");

                &:first-child {
                    margin-right: @wrap-box-item-gap;
                }

                &:last-child {
                    margin-left: @wrap-box-item-gap;
                }
            }
        }
    }

    &__full {
        flex-direction: column;
        width: 100%;
        padding: @wrap-box-padding;
        margin-bottom: @wrap-box-item-gap;

        border-radius: @radius;
        background-color: @color-f;

        @media @query-lg {
            flex-direction: row;
            width: 100%;
        }
    }
}