:nth-child(2 of .top-border) {
    --column-offset: 2;
}

:nth-child(3 of .top-border) {
    --column-offset: 4;
}

:nth-child(4 of .top-border) {
    --column-offset: 6;
}

:nth-child(5 of .top-border) {
    --column-offset: 8;
}

:nth-child(6 of .top-border) {
    --column-offset: 10;
}

:nth-child(7 of .top-border) {
    --column-offset: 12;
}

:nth-child(8 of .top-border) {
    --column-offset: 14;
}

:nth-child(9 of .top-border) {
    --column-offset: 16;
}

:nth-child(10 of .top-border) {
    --column-offset: 18;
}

:nth-child(11 of .top-border) {
    --column-offset: 20;
}

:nth-child(2 of .bottom-border) {
    --column-offset: 2;
}

:nth-child(3 of .bottom-border) {
    --column-offset: 4;
}

:nth-child(4 of .bottom-border) {
    --column-offset: 6;
}

:nth-child(5 of .bottom-border) {
    --column-offset: 8;
}

:nth-child(6 of .bottom-border) {
    --column-offset: 10;
}

:nth-child(7 of .bottom-border) {
    --column-offset: 12;
}

:nth-child(8 of .bottom-border) {
    --column-offset: 14;
}

:nth-child(9 of .bottom-border) {
    --column-offset: 16;
}

:nth-child(10 of .bottom-border) {
    --column-offset: 18;
}

:nth-child(11 of .bottom-border) {
    --column-offset: 20;
}

:nth-child(2 of .left-border) {
    --column-offset: 1;
    --row-offset: 2;
}

:nth-child(3 of .left-border) {
    --column-offset: 2;
    --row-offset: 4;
}

:nth-child(4 of .left-border) {
    --column-offset: 3;
    --row-offset: 6;
}

:nth-child(5 of .left-border) {
    --column-offset: 4;
    --row-offset: 8;
}

:nth-child(6 of .left-border) {
    --column-offset: 5;
    --row-offset: 10;
}

:nth-child(7 of .left-border) {
    --column-offset: 6;
    --row-offset: 12;
}

:nth-child(8 of .left-border) {
    --column-offset: 7;
    --row-offset: 14;
}

:nth-child(9 of .left-border) {
    --column-offset: 8;
    --row-offset: 16;
}

:nth-child(10 of .left-border) {
    --column-offset: 9;
    --row-offset: 18;
}

:nth-child(11 of .left-border) {
    --column-offset: 10;
    --row-offset: 20;
}

:nth-child(2 of .right-border) {
    --column-offset: 1;
    --row-offset: 2;
}

:nth-child(3 of .right-border) {
    --column-offset: 2;
    --row-offset: 4;
}

:nth-child(4 of .right-border) {
    --column-offset: 3;
    --row-offset: 6;
}

:nth-child(5 of .right-border) {
    --column-offset: 4;
    --row-offset: 8;
}

:nth-child(6 of .right-border) {
    --column-offset: 5;
    --row-offset: 10;
}

:nth-child(7 of .right-border) {
    --column-offset: 6;
    --row-offset: 12;
}

:nth-child(8 of .right-border) {
    --column-offset: 7;
    --row-offset: 14;
}

:nth-child(9 of .right-border) {
    --column-offset: 8;
    --row-offset: 16;
}

:nth-child(10 of .right-border) {
    --column-offset: 9;
    --row-offset: 18;
}

:nth-child(11 of .right-border) {
    --column-offset: 10;
    --row-offset: 20;
}

.top-border {
    position: relative;
    grid-column: calc(1 + var(--column-offset));
    grid-row: 1 / span 3;
    margin-top: 0.5rem;
    margin-right: -1.6rem;
    margin-bottom: -1.8rem;
    margin-left: -1rem;
    clip-path: polygon(6.7% 25%, 50% 0%, 93.3% 25%, 93.3% 35%, 50% 10%, 6.7% 35%);
    background-color: var(--red);
    z-index: 2;
}

.bottom-border {
    position: relative;
    grid-column: calc(11 + var(--column-offset));
    grid-row: 27;
    clip-path: polygon(93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 65%, 50% 90%, 93.3% 65%);
    margin-top: -5rem;
    margin-right: -1.6rem;
    margin-bottom: 0.8rem;
    margin-left: -1rem;
    background-color: var(--red);
    z-index: 2;
}

.left-border {
    position: relative;
    grid-column: calc(1 + var(--column-offset));
    grid-row: calc(4 + var(--row-offset));
    clip-path: polygon(50% 100%, 6.7% 75%, 6.7% 25%, 15.5% 30%, 15.5% 70%, 50% 90%);
    margin-top: -2.5rem;
    margin-right: -1.8rem;
    margin-bottom: -1.8rem;
    margin-left: -1rem;
    background-color: var(--blue);
    z-index: 1;
}

.right-border {
    position: relative;
    grid-column: calc(21 + var(--column-offset));
    grid-row: calc(4 + var(--row-offset));
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 84.5% 80%, 84.5% 30%, 50% 10%);
    margin-top: -2.7rem;
    margin-right: -1.9rem;
    margin-bottom: -1.2rem;
    margin-left: -1.5rem;
    background-color: var(--blue);
    z-index: 1;
}