/*
 * Services include style for gallura template.
 */

section.previewCat {
    padding: 0;
}

section.previewCat > .row {
    width: 100%;
    display: flex;
}

section.previewCat .row.arrow {
    height: 50px;
}

section.previewCat .row div.halfCol {
    width: 50%;
}

section.previewCat .row div.halfCol.text-container {
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section.previewCat.reverse .row div.halfCol.text-container {
    order: 2;
}

section.previewCat .row div.halfCol.text-container h2 {
    color: var(--green);
    font-size: 1.5em;
    margin-bottom: .5em;
}

section.previewCat .row div.halfCol.image-container img {
    width: 100%;
    display: block;
    height: 35vh;
    object-fit: cover;
}

section.previewCat .row div.halfCol.text-container p {
    margin-bottom: 1em;
}

section.previewCat:before {
    position: absolute;
    content: "";
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: var(--lightGrey) transparent var(--lightGrey) var(--lightGrey);
    left: 0;
    right: 85%;
    bottom: 0;
}

section.previewCat:after {
    left: 15%;
    position: absolute;
    content: "";
    width: 85%;
    border-style: solid;
    border-width: 0 0 50px 50px;
    border-color: transparent transparent var(--lightGrey) transparent;
    bottom: 0;
    box-sizing: border-box;
}

section.previewCat.reverse:before {
    right: 15%;
}

section.previewCat.reverse:after {
    left: 85%;
    width: 15%;
}

@media screen and (max-width: 768px) {
    section.previewCat {
        padding: 0 0 3em;
    }

    section.previewCat > .row {
        flex-direction: column;
        align-items: center;
    }

    section.previewCat .row div.halfCol {
        width: 75%;
    }

    section.previewCat .row div.halfCol.image-container {
        margin-bottom: 2em;
        order: 1;
        width: 100%;
    }

    section.previewCat .row div.halfCol.text-container {
        order: 2;
    }

    section.previewCat:before,
    section.previewCat.reverse:before {
        right: 50%;
    }

    section.previewCat:after,
    section.previewCat.reverse:after {
        left: 50%;
        width: 50%;
    }
}

@media screen and (max-width: 576px) {
    section.previewCat .row div.halfCol {
        width: 100%;
    }
}