.x-cross {
    width: 12px;
    height: 12px;
    position: relative;
    opacity: .25;
}
.x-cross:before, .x-cross:after {
    content: '';
    display: block;
    position: absolute;
    background-color: #FFFFFF;
}
.x-cross::before {
    width: 100%;
    height: 2px;
    top: 5px;
}
.x-cross::after {
    width: 2px;
    height: 100%;
    left: 5px;
}
.line-h {
    height: 2px;
    padding: 0.5px 11px;
    position: relative;
    opacity: .25;
}
.line-v {
    width: 2px;
    padding: 11px 0.5px;
    position: relative;
    opacity: .25;
}
.line-h::after, .line-v::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}
.x-lines-block {
    position: relative;
}
.x-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.lines-h {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.lines-h .line-h {
    width: 25%;
}
.lines-h .line-h.line-h-two-blocks {
    width: 50%;
}
.lines-h .line-h:first-child, .lines-h .line-h:last-child {
    position: absolute;
    width: 100vw;
}
.lines-h .line-h:first-child {
    left: -100vw;
}
.lines-h .line-h:last-child {
    right: -100vw;
}
.crosses {
    position: absolute;
    width: calc(100% + 12px);
    left: -6px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.crosses-top {
    top: -6px;
}
.crosses-bottom {
    bottom: -6px;
}
.lines-v {
    position: absolute;
    height: 100%;
    width: calc(100% + 2px);
    top: 0;
    left: -1px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.lines-h-top {
    top: -1px;
}
.lines-h-bottom {
    bottom: -1px;
}

.x-lines-middle {
    display: none;
}
.x-lines-middle.lines-h {
    top: 50%;
}
.x-lines-middle.crosses {
    top: calc(50% - 5px);
}
.x-lines-middle.lines-v {
    top: calc(50% + 1px);
    height: calc(50% - 1px);
}
.x-lines-container {
    position: relative;
}
.x-lines-content {
    position: relative;
    z-index: 3;
}
.x-lines-background, .x-lines-background > * {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}