.pathParent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
}

.pathParent>a {
    min-height: 150px;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
    padding: 24px;
    border: 1px solid #B8D0E6;
    border-radius: 20px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.pathParent>a>span {
    display: flex;
    align-items: flex-end;
}

.pathParent>a>span .ico {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-right: 20px;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.pathParent>a>span .txt {
    font-size: 30px;
    font-weight: 700;
    color: #004D99;
}

.assembly {
    grid-area: 1 / 1 / 2 / 2;
    background-image: url(../images/developmentPath/bg-assembly.jpg);
}

.python {
    grid-area: 2 / 1 / 3 / 2;
    background-image: url(../images/developmentPath/bg-python.jpg);
}

.python_assembly {
    grid-area: 1 / 2 / 3 / 4;
    background-image: url(../images/developmentPath/python_assembly.png);
}

.c {
    grid-area: 3 / 1 / 4 / 3;
    background-image: url(../images/developmentPath/bg-c.jpg);
}

.algorytmika {
    grid-area: 4 / 1 / 5 / 3;
    background-image: url(../images/developmentPath/bg-algorytmika.jpg);
}

.liga_zadaniowa {
    grid-area: 5 / 1 / 6 / 3;
    background-image: url(../images/developmentPath/bg-liga-zadaniowa.jpg);
}

.sql {
    grid-area: 3 / 3 / 6 / 4;
    background-image: url(../images/developmentPath/bg-sql.jpg);
}

.pathParent>a.assembly>span .ico {
    background-image: url(../images/developmentPath/ico-assembly.svg);
}

.pathParent>a.python>span .ico {
    background-image: url(../images/developmentPath/ico-python.svg);
}

.pathParent>a.python_assembly>span .ico {
    background-image: url(../images/developmentPath/ico-assembly-python.svg);
}

.pathParent>a.c>span .ico {
    background-image: url(../images/developmentPath/ico-c-plus-plus.svg);
}

.pathParent>a.algorytmika>span .ico {
    background-image: url(../images/developmentPath/ico-algorytmika.svg);
}

.pathParent>a.liga_zadaniowa>span .ico {
    background-image: url(../images/developmentPath/ico-liga-zadaniowa.svg);
}

.pathParent>a.sql>span .ico {
    background-image: url(../images/developmentPath/ico-sql.svg);
}

.pathParent>a:after {
    content: "";
    display: block;
    width: 41px;
    height: 59px;
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    margin: auto;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MC41NjMiIGhlaWdodD0iNTkiIHZpZXdCb3g9IjAgMCA0MC41NjMgNTkiPg0KICA8ZyBpZD0iZG91YmxlLWFycm93LWRvd24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01IDApIj4NCiAgICA8cGF0aCBpZD0iUGF0aF8xNTAiIGRhdGEtbmFtZT0iUGF0aCAxNTAiIGQ9Ik00NC40MjUsMTMuMTRhMS44NDQsMS44NDQsMCwwLDAtMi4wMS40TDI1LjI4MSwzMC42NzQsOC4xNDcsMTMuNTRBMS44NDQsMS44NDQsMCwwLDAsNSwxNC44NDRWMjcuNzVhMS44NDQsMS44NDQsMCwwLDAsLjU0LDEuM0wyMy45NzgsNDcuNDkxYTEuODQ0LDEuODQ0LDAsMCwwLDIuNjA3LDBMNDUuMDIyLDI5LjA1NGExLjg0NCwxLjg0NCwwLDAsMCwuNTQtMS4zVjE0Ljg0NGExLjg0NCwxLjg0NCwwLDAsMC0xLjEzOC0xLjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEwLjk2OSkiIGZpbGw9IiMwMDRkOTkiLz4NCiAgICA8cGF0aCBpZD0iUGF0aF8xNTEiIGRhdGEtbmFtZT0iUGF0aCAxNTEiIGQ9Ik00NC40MjUuMTRhMS44NDQsMS44NDQsMCwwLDAtMi4wMS40TDI1LjI4MSwxNy42NzQsOC4xNDcuNTRBMS44NDQsMS44NDQsMCwwLDAsNSwxLjg0NFYxNC43NWExLjg0NCwxLjg0NCwwLDAsMCwuNTQsMS4zTDIzLjk3OCwzNC40OTFhMS44NDQsMS44NDQsMCwwLDAsMi42MDcsMEw0NS4wMjIsMTYuMDU0YTEuODQ0LDEuODQ0LDAsMCwwLC41NC0xLjNWMS44NDRBMS44NDQsMS44NDQsMCwwLDAsNDQuNDI1LjE0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0iIzAwN2ZmZiIvPg0KICA8L2c+DQo8L3N2Zz4NCg==') 50% 50% no-repeat;
    z-index: 1;
    background-size: 100% auto;
}

.pathParent>a.liga_zadaniowa:after,
.pathParent>a.sql:after {
    display: none;
}

.pathParent>a.python_assembly:after {
    margin-left: calc(25% - 41px);
}

.pathParent>a.python_assembly:before {
    content: "";
    display: block;
    width: 41px;
    height: 59px;
    bottom: -50px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 calc(25% - 41px) 0 auto;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MC41NjMiIGhlaWdodD0iNTkiIHZpZXdCb3g9IjAgMCA0MC41NjMgNTkiPg0KICA8ZyBpZD0iZG91YmxlLWFycm93LWRvd24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01IDApIj4NCiAgICA8cGF0aCBpZD0iUGF0aF8xNTAiIGRhdGEtbmFtZT0iUGF0aCAxNTAiIGQ9Ik00NC40MjUsMTMuMTRhMS44NDQsMS44NDQsMCwwLDAtMi4wMS40TDI1LjI4MSwzMC42NzQsOC4xNDcsMTMuNTRBMS44NDQsMS44NDQsMCwwLDAsNSwxNC44NDRWMjcuNzVhMS44NDQsMS44NDQsMCwwLDAsLjU0LDEuM0wyMy45NzgsNDcuNDkxYTEuODQ0LDEuODQ0LDAsMCwwLDIuNjA3LDBMNDUuMDIyLDI5LjA1NGExLjg0NCwxLjg0NCwwLDAsMCwuNTQtMS4zVjE0Ljg0NGExLjg0NCwxLjg0NCwwLDAsMC0xLjEzOC0xLjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEwLjk2OSkiIGZpbGw9IiMwMDRkOTkiLz4NCiAgICA8cGF0aCBpZD0iUGF0aF8xNTEiIGRhdGEtbmFtZT0iUGF0aCAxNTEiIGQ9Ik00NC40MjUuMTRhMS44NDQsMS44NDQsMCwwLDAtMi4wMS40TDI1LjI4MSwxNy42NzQsOC4xNDcuNTRBMS44NDQsMS44NDQsMCwwLDAsNSwxLjg0NFYxNC43NWExLjg0NCwxLjg0NCwwLDAsMCwuNTQsMS4zTDIzLjk3OCwzNC40OTFhMS44NDQsMS44NDQsMCwwLDAsMi42MDcsMEw0NS4wMjIsMTYuMDU0YTEuODQ0LDEuODQ0LDAsMCwwLC41NC0xLjNWMS44NDRBMS44NDQsMS44NDQsMCwwLDAsNDQuNDI1LjE0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0iIzAwN2ZmZiIvPg0KICA8L2c+DQo8L3N2Zz4NCg==') 50% 50% no-repeat;
    z-index: 1;
    background-size: 100% auto;
}

@media screen and (max-width:1250px) {
    .pathParent {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

    .pathParent>a:after {
        width: 26px;
        height: 37px;
        bottom: -30px
    }

    .pathParent>a.python_assembly:before {
        width: 26px;
        height: 37px;
        bottom: -30px
    }

    .pathParent>a>span .txt {
        font-size: 18px;
        text-align: center
    }

    .pathParent>a>span {
        flex-direction: column;
        align-items: center
    }

    .pathParent>a>span .ico {
        margin: 0 0 20px 0;
        width: 60px;
        height: 60px
    }
}