.section-side-by-side {
    margin: 80px 0;

    @media screen and (max-width: 768px) {
        margin: 40px 0;
    }

    .section-side-by-side__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;

        @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
        }

        .section-side-by-side__content {
            padding-right: 76px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            @media screen and (max-width: 768px) {
                padding-right: 0;
            }

            .section-side-by-side__content-title {
                padding-top: 0;
                padding-bottom: 24px;
                margin: 0;
                font-size: 22px;
                line-height: 29px;
                font-weight: 700;
            }

            p, ul, ol {
                font-size: 14px;
                line-height: 22px;
                margin-bottom: 10px;
            }
        }

        .section-side-by-side__image {
            img {
                max-width: 100%;
                width: 100%;
                object-fit: cover;
            }
        }

        &.img_left {
            .section-side-by-side__content {
                padding-right: 0;
                padding-left: 76px;

                @media screen and (max-width: 768px) {
                    padding-left: 0;
                }
            }

            .section-side-by-side__image {
                grid-column: 1;
                grid-row: 1;

                @media screen and (max-width: 768px) {
                    grid-row: auto;
                    grid-column: auto;
                }
            }
        }

        &.boxed {
            max-width: 1131px;
            margin: 0 auto;
            grid-template-columns: 8fr 5fr;

            @media screen and (max-width: 768px) {
                grid-template-columns: 1fr;
            }
        }

        &.boxed.img_left {
            grid-template-columns: 5fr 8fr;

            @media screen and (max-width: 768px) {
                grid-template-columns: 1fr;
            }
        }
    }
}