.swp-row {
    display: block;
    margin: 0 30px;
    padding: 30px 0;
}

.swp-col,
.swp-flex--item {
    display: block;
}

/* --- Grid --- */

.swp-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
    grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
    grid-gap: 40px;
}

.swp-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.swp-grid--gap12 {
    grid-gap: 12px; 
}


/* --- Flex --- */

.swp-flex--row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.swp-flex--col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.swp-justify-between {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.swp-justify-center {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.swp-justify-end {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.swp-flex--align-c {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.swp-flex--gap5 {
    gap: 5px;
}

.swp-flex--gap9 {
    gap: 9px;
}

.swp-flex--gap12 {
    gap: 12px;
}

.swp-flex--gap15 {
    gap: 15px;
}

.swp-flex--gap17 {
    gap: 17px;
}

.swp-flex--gap20 {
    gap: 20px;
}

.swp-flex--gap25 {
    gap: 25px;
}

.swp-flex--gap30 {
    gap: 30px;
}

.swp-flex--gap40 {
    gap: 40px;
}

.swp-flex--gap80 {
    gap: 80px;
}

.swp-flex--grow0 {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
}

.swp-flex--grow1 {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.swp-flex--grow2 {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
}

.swp-flex--wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.swp-flex--same-size {
    flex: 1 1 0;
}

.swp-flex--self-center {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
            align-self: center;
}

@media only screen and (max-width: 1080px) {
    
    .l\:swp-flex--col {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .l\:swp-flex--gap30 {
        gap: 30px;
    }

}

@media only screen and (max-width: 767px) {
    
    .sm\:swp-flex--col {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .sm\:swp-flex--wrap {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

    .sm\:swp-flex--align-start {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
    }

    .sm\:swp-items-stretch {
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    .sm\:swp-justify-center {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .sm\:swp-justify-between {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .sm\:swp-flex--gap15 {
        gap: 15px
    }

    .sm\:swp-flex--gap30 {
        gap: 30px
    }

    .sm\:swp-grid--col-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
