.outline-box-left {
    padding-bottom: 2.5rem;
    position: relative;
    width: calc(100% - 12px)
}

.outline-box-left:before {
    border: 1px solid #797979;
    content: "";
    height: calc(100% - 5rem);
    left: -1rem;
    pointer-events: none;
    position: absolute;
    top: 5rem;
    width: calc(100% + 32px)
}

@media screen and (min-width:768px) {
    .outline-box-left {
        margin-left: 1rem;
        padding-bottom: 5rem;
        padding-left: 8.3333333333%;
        padding-top: 5rem
    }

    .outline-box-left:before {
        bottom: inherit;
        height: 100%;
        left: 0;
        right: inherit;
        top: 0;
        width: 83.3333333333%
    }
}

@media screen and (max-width:767px) {
    .outline-box-left {
        margin-left: auto;
        margin-right: auto
    }
}

.outline-box-right {
    padding-bottom: 2.5rem;
    position: relative;
    width: calc(100% - .75rem)
}

.outline-box-right:before {
    border: 1px solid #797979;
    content: "";
    height: calc(100% - 5rem);
    left: -1rem;
    pointer-events: none;
    position: absolute;
    top: 5rem;
    width: calc(100% + 32px)
}

@media screen and (min-width:768px) {
    .outline-box-right {
        margin-left: 1rem;
        padding-bottom: 5rem;
        padding-right: 8.3333333333%;
        padding-top: 5rem;
        width: calc(100% - 32px)
    }

    .outline-box-right:before {
        bottom: inherit;
        height: 100%;
        left: inherit;
        right: 0;
        top: 0;
        width: 83.3333333333%
    }
}

@media screen and (max-width:767px) {
    .outline-box-right {
        margin-left: auto;
        margin-right: auto
    }
}

.no-outline:before {
    display: none
}