diff --git a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
index dbd471379fa9ba2b3e0f6c7d0599e0a74cb9bd9f..ff18046df10011cf1b24a526a9d16646364f24e4 100644
--- a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
+++ b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
@@ -21,11 +21,15 @@
margin-top: 30px;
}
+.paragraph--type--columns-4 {
+ margin-top: 30px;
+}
+
.paragraph--type--accordion .field, .paragraph--type--tabs .field {
padding: 20px;
}
-.para_2_col, .para_3_col {
+.para_2_col, .para_3_col, .para_4_col {
h2, h3, h4, h5, h6 {
margin-top: 0;
line-height: 20px;
diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css
index eb0d5b56483c9663a1e2943c2d18338cf5f09881..e8e2058d68f8df8012bc8bb414331ac4b668cc90 100644
--- a/web/themes/asc_bootstrap/css/style.css
+++ b/web/themes/asc_bootstrap/css/style.css
@@ -11857,108 +11857,113 @@ article.news-story {
}
/* line 24, ../assets/sass/components/_paragraphs.scss */
+.paragraph--type--columns-4 {
+ margin-top: 30px;
+}
+
+/* line 28, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--accordion .field, .paragraph--type--tabs .field {
padding: 20px;
}
-/* line 29, ../assets/sass/components/_paragraphs.scss */
-.para_2_col h2, .para_2_col h3, .para_2_col h4, .para_2_col h5, .para_2_col h6, .para_3_col h2, .para_3_col h3, .para_3_col h4, .para_3_col h5, .para_3_col h6 {
+/* line 33, ../assets/sass/components/_paragraphs.scss */
+.para_2_col h2, .para_2_col h3, .para_2_col h4, .para_2_col h5, .para_2_col h6, .para_3_col h2, .para_3_col h3, .para_3_col h4, .para_3_col h5, .para_3_col h6, .para_4_col h2, .para_4_col h3, .para_4_col h4, .para_4_col h5, .para_4_col h6 {
margin-top: 0;
line-height: 20px;
}
-/* line 35, ../assets/sass/components/_paragraphs.scss */
+/* line 39, ../assets/sass/components/_paragraphs.scss */
.paragraph__column {
width: 100%;
float: left;
}
-/* line 39, ../assets/sass/components/_paragraphs.scss */
+/* line 43, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .col-l {
padding-left: 0;
padding-right: 15px;
}
@media (max-width: 768px) {
- /* line 39, ../assets/sass/components/_paragraphs.scss */
+ /* line 43, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .col-l {
padding-right: 0;
padding-left: 0;
}
}
-/* line 49, ../assets/sass/components/_paragraphs.scss */
+/* line 53, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .col-m {
padding-right: 7.5px;
padding-left: 7.5px;
}
@media (max-width: 768px) {
- /* line 49, ../assets/sass/components/_paragraphs.scss */
+ /* line 53, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .col-m {
padding-right: 0;
padding-left: 0;
}
}
-/* line 59, ../assets/sass/components/_paragraphs.scss */
+/* line 63, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .col-r {
padding-right: 0;
padding-left: 15px;
}
@media (max-width: 768px) {
- /* line 59, ../assets/sass/components/_paragraphs.scss */
+ /* line 63, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .col-r {
padding-right: 0;
padding-left: 0;
}
}
-/* line 69, ../assets/sass/components/_paragraphs.scss */
+/* line 73, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .col-f {
padding-right: 0;
padding-left: 0;
}
@media (max-width: 768px) {
- /* line 74, ../assets/sass/components/_paragraphs.scss */
+ /* line 78, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .container {
padding: 0;
}
- /* line 79, ../assets/sass/components/_paragraphs.scss */
+ /* line 83, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .container .call-out-container {
margin: 15px 0;
}
}
@media (max-width: 768px) {
- /* line 85, ../assets/sass/components/_paragraphs.scss */
+ /* line 89, ../assets/sass/components/_paragraphs.scss */
.paragraph__column .col-xs-12 {
margin-bottom: 20px;
}
}
-/* line 99, ../assets/sass/components/_paragraphs.scss */
+/* line 103, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--accordion .field {
padding: 20px;
}
-/* line 102, ../assets/sass/components/_paragraphs.scss */
+/* line 106, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--accordion .field p {
margin: 0 0 16px;
}
-/* line 107, ../assets/sass/components/_paragraphs.scss */
+/* line 111, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--accordion .field--name-field-media-file {
padding: 0;
margin-bottom: 15px;
}
-/* line 112, ../assets/sass/components/_paragraphs.scss */
+/* line 116, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--accordion .panel-default {
border: none;
}
-/* line 116, ../assets/sass/components/_paragraphs.scss */
+/* line 120, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--accordion .panel-heading {
border: none;
padding: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
-/* line 123, ../assets/sass/components/_paragraphs.scss */
+/* line 127, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--accordion .card-header {
margin: 0 0 10px;
}
-/* line 126, ../assets/sass/components/_paragraphs.scss */
+/* line 130, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--accordion .card-header .panel-title {
color: #b00;
margin: 0;
@@ -11973,34 +11978,34 @@ article.news-story {
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
-/* line 141, ../assets/sass/components/_paragraphs.scss */
+/* line 145, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--accordion .card-header svg, .paragraph--type--accordion .card-header i {
float: right;
margin-top: 5px;
color: #787878;
}
-/* line 149, ../assets/sass/components/_paragraphs.scss */
+/* line 153, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--accordion .panel div:nth-last-child(2) {
margin-bottom: 0 !important;
}
-/* line 158, ../assets/sass/components/_paragraphs.scss */
+/* line 162, ../assets/sass/components/_paragraphs.scss */
.btn-par {
font-weight: 600;
text-transform: uppercase;
}
-/* line 162, ../assets/sass/components/_paragraphs.scss */
+/* line 166, ../assets/sass/components/_paragraphs.scss */
.btn-par .fa-angle-right {
margin-left: 10px;
}
-/* line 167, ../assets/sass/components/_paragraphs.scss */
+/* line 171, ../assets/sass/components/_paragraphs.scss */
.btn-fullw-wrapper {
color: #4A4A4A;
}
-/* line 171, ../assets/sass/components/_paragraphs.scss */
+/* line 175, ../assets/sass/components/_paragraphs.scss */
.btn-fullw {
width: 100%;
text-align: center;
@@ -12011,53 +12016,53 @@ article.news-story {
-ms-border-radius: 5px;
border-radius: 5px;
}
-/* line 181, ../assets/sass/components/_paragraphs.scss */
+/* line 185, ../assets/sass/components/_paragraphs.scss */
.btn-fullw:hover {
text-decoration: underline;
background-color: #efefef;
}
-/* line 194, ../assets/sass/components/_paragraphs.scss */
+/* line 198, ../assets/sass/components/_paragraphs.scss */
.call-out-container .img-link-wrapper:hover + .field--type-link a {
color: #BB0000;
text-decoration: underline;
}
-/* line 199, ../assets/sass/components/_paragraphs.scss */
+/* line 203, ../assets/sass/components/_paragraphs.scss */
.call-out-container .field--item:hover > a {
color: #BB0000;
text-decoration: underline;
}
-/* line 204, ../assets/sass/components/_paragraphs.scss */
+/* line 208, ../assets/sass/components/_paragraphs.scss */
.call-out-container a {
color: #444444;
font-size: 20px;
padding-top: 5px;
font-weight: 500;
}
-/* line 210, ../assets/sass/components/_paragraphs.scss */
+/* line 214, ../assets/sass/components/_paragraphs.scss */
.call-out-container a:hover {
color: #BB0000;
text-decoration: underline;
}
-/* line 216, ../assets/sass/components/_paragraphs.scss */
+/* line 220, ../assets/sass/components/_paragraphs.scss */
.call-out-container .field--type-link {
width: 100%;
border-bottom: #BB0000 solid 5px;
margin-bottom: 15px;
}
-/* line 221, ../assets/sass/components/_paragraphs.scss */
+/* line 225, ../assets/sass/components/_paragraphs.scss */
.call-out-container .field--type-link .field--item {
padding: 15px;
background: #F5F5F5;
}
@media (max-width: 768px) {
- /* line 216, ../assets/sass/components/_paragraphs.scss */
+ /* line 220, ../assets/sass/components/_paragraphs.scss */
.call-out-container .field--type-link {
margin-bottom: 0;
}
}
-/* line 242, ../assets/sass/components/_paragraphs.scss */
+/* line 246, ../assets/sass/components/_paragraphs.scss */
.dgray-bg .call-out-container a,
.dscarlet-bg .call-out-container a,
.dviolet-bg .call-out-container a,
@@ -12067,7 +12072,7 @@ article.news-story {
.dorange-bg .call-out-container a {
text-decoration: none;
}
-/* line 245, ../assets/sass/components/_paragraphs.scss */
+/* line 249, ../assets/sass/components/_paragraphs.scss */
.dgray-bg .call-out-container a:hover,
.dscarlet-bg .call-out-container a:hover,
.dviolet-bg .call-out-container a:hover,
@@ -12078,20 +12083,20 @@ article.news-story {
text-decoration: underline;
}
-/* line 260, ../assets/sass/components/_paragraphs.scss */
+/* line 264, ../assets/sass/components/_paragraphs.scss */
.file .file-icon span {
color: #bb0000;
}
-/* line 267, ../assets/sass/components/_paragraphs.scss */
+/* line 271, ../assets/sass/components/_paragraphs.scss */
.file .file-link a {
color: #bb0000;
}
-/* line 272, ../assets/sass/components/_paragraphs.scss */
+/* line 276, ../assets/sass/components/_paragraphs.scss */
.file .file-size {
color: #bb0000;
}
-/* line 282, ../assets/sass/components/_paragraphs.scss */
+/* line 286, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container {
width: 100%;
position: absolute;
@@ -12101,7 +12106,7 @@ article.news-story {
height: 100%;
max-height: 550px;
}
-/* line 291, ../assets/sass/components/_paragraphs.scss */
+/* line 295, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
@@ -12113,7 +12118,7 @@ article.news-story {
transform: perspective(1px) translateY(-50%);
}
@media (max-width: 768px) {
- /* line 291, ../assets/sass/components/_paragraphs.scss */
+ /* line 295, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt {
width: 80%;
top: 45%;
@@ -12123,11 +12128,11 @@ article.news-story {
justify-content: center;
}
}
-/* line 310, ../assets/sass/components/_paragraphs.scss */
+/* line 314, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper {
width: 100%;
}
-/* line 313, ../assets/sass/components/_paragraphs.scss */
+/* line 317, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper h2 {
font-size: 36px;
text-transform: uppercase;
@@ -12136,36 +12141,36 @@ article.news-story {
line-height: 1.1;
}
@media (max-width: 768px) {
- /* line 313, ../assets/sass/components/_paragraphs.scss */
+ /* line 317, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper h2 {
font-size: 15px;
margin-top: 0;
}
}
-/* line 326, ../assets/sass/components/_paragraphs.scss */
+/* line 330, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper p {
font-size: 18px;
margin: 25px 0;
color: #333333;
}
@media (max-width: 768px) {
- /* line 326, ../assets/sass/components/_paragraphs.scss */
+ /* line 330, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper p {
font-size: 14px;
margin-top: 0;
}
}
-/* line 337, ../assets/sass/components/_paragraphs.scss */
+/* line 341, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn {
white-space: normal;
}
-/* line 341, ../assets/sass/components/_paragraphs.scss */
+/* line 345, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 {
width: 100%;
margin: 0 auto;
font-size: 18px;
}
-/* line 346, ../assets/sass/components/_paragraphs.scss */
+/* line 350, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper {
min-width: 25%;
margin: 10px;
@@ -12175,23 +12180,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 355, ../assets/sass/components/_paragraphs.scss */
+/* line 359, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper .btn-primary {
background-color: transparent;
border-color: transparent;
border: 0;
border-radius: 0;
}
-/* line 362, ../assets/sass/components/_paragraphs.scss */
+/* line 366, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper i {
padding-top: 1px;
}
-/* line 366, ../assets/sass/components/_paragraphs.scss */
+/* line 370, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper:hover {
background: #8E0101;
}
@media (max-width: 768px) {
- /* line 346, ../assets/sass/components/_paragraphs.scss */
+ /* line 350, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper {
display: block;
width: 100%;
@@ -12199,22 +12204,22 @@ article.news-story {
font-weight: 700;
}
}
-/* line 378, ../assets/sass/components/_paragraphs.scss */
+/* line 382, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 382, ../assets/sass/components/_paragraphs.scss */
+/* line 386, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 388, ../assets/sass/components/_paragraphs.scss */
+/* line 392, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 {
width: 100%;
margin: 0 auto;
font-size: 18px;
}
-/* line 393, ../assets/sass/components/_paragraphs.scss */
+/* line 397, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper {
min-width: 40%;
margin: 10px;
@@ -12224,23 +12229,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 402, ../assets/sass/components/_paragraphs.scss */
+/* line 406, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper .btn-primary {
background-color: transparent;
border-color: transparent;
border: 0;
border-radius: 0;
}
-/* line 409, ../assets/sass/components/_paragraphs.scss */
+/* line 413, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper i {
padding-top: 1px;
}
-/* line 413, ../assets/sass/components/_paragraphs.scss */
+/* line 417, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper:hover {
background: #8E0101;
}
@media (max-width: 768px) {
- /* line 393, ../assets/sass/components/_paragraphs.scss */
+ /* line 397, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper {
display: block;
width: 100%;
@@ -12248,22 +12253,22 @@ article.news-story {
font-weight: 700;
}
}
-/* line 425, ../assets/sass/components/_paragraphs.scss */
+/* line 429, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 429, ../assets/sass/components/_paragraphs.scss */
+/* line 433, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 435, ../assets/sass/components/_paragraphs.scss */
+/* line 439, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 {
width: 100%;
margin: 0 auto;
font-size: 18px;
}
-/* line 440, ../assets/sass/components/_paragraphs.scss */
+/* line 444, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper {
min-width: 50%;
margin: 10px;
@@ -12273,23 +12278,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 449, ../assets/sass/components/_paragraphs.scss */
+/* line 453, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper .btn-primary {
background-color: transparent;
border-color: transparent;
border: 0;
border-radius: 0;
}
-/* line 456, ../assets/sass/components/_paragraphs.scss */
+/* line 460, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper i {
padding-top: 1px;
}
-/* line 460, ../assets/sass/components/_paragraphs.scss */
+/* line 464, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper:hover {
background: #8E0101;
}
@media (max-width: 768px) {
- /* line 440, ../assets/sass/components/_paragraphs.scss */
+ /* line 444, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper {
display: block;
width: 100%;
@@ -12297,46 +12302,46 @@ article.news-story {
font-weight: 700;
}
}
-/* line 472, ../assets/sass/components/_paragraphs.scss */
+/* line 476, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 476, ../assets/sass/components/_paragraphs.scss */
+/* line 480, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 493, ../assets/sass/components/_paragraphs.scss */
+/* line 497, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tagline {
margin: 20px 0;
float: left;
}
-/* line 504, ../assets/sass/components/_paragraphs.scss */
+/* line 508, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field {
padding: 20px;
}
-/* line 508, ../assets/sass/components/_paragraphs.scss */
+/* line 512, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field--name-field-media-file {
padding: 0;
}
-/* line 512, ../assets/sass/components/_paragraphs.scss */
+/* line 516, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field--name-field-media-image {
padding: 20px 0;
}
-/* line 523, ../assets/sass/components/_paragraphs.scss */
+/* line 527, ../assets/sass/components/_paragraphs.scss */
.para_1_col .field--name-field-media-twitter {
margin: 0 auto;
width: 60%;
}
-/* line 527, ../assets/sass/components/_paragraphs.scss */
+/* line 531, ../assets/sass/components/_paragraphs.scss */
.para_1_col .field--name-field-media-twitter .col-xs-12 {
padding: 0;
}
-/* line 537, ../assets/sass/components/_paragraphs.scss */
+/* line 541, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--video iframe {
width: 100% !important;
}
diff --git a/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_four.html.twig b/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_four.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b27300e85a16622699a2b52ae6cb93a6d5bdee5c
--- /dev/null
+++ b/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_four.html.twig
@@ -0,0 +1,92 @@
+{#
+/**
+ * @file
+ * Custom Paragraphs template for displaying a Three Column layout.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ * - id: The paragraph ID.
+ * - bundle: The type of the paragraph, for example, "image" or "text".
+ * - authorid: The user ID of the paragraph author.
+ * - createdtime: Formatted creation date. Preprocess functions can
+ * reformat it by calling format_date() with the desired parameters on
+ * $variables['paragraph']->getCreatedTime().
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ * or print a subset such as {{ content.field_example }}. Use
+ * {{ content|without('field_example') }} to temporarily suppress the printing
+ * of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ * The attributes.class element may contain one or more of the following
+ * classes:
+ * - paragraphs: The current template type (also known as a "theming hook").
+ * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ * "Image" it would result in "paragraphs--type--image". Note that the machine
+ * name will often be in a short form of the human readable label.
+ * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ * preview would result in: "paragraphs--view-mode--preview", and
+ * default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ * current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ * is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ */
+#}
+
+{# Setting up variables that determines the width for left, middle and right columns #}
+{% if content.field_column_style_3['#items'].getString() == "paragraph--style--25-25-25-25" %}
+
+ {% set leftwidth, mleftwidth, mrightwidth, rightwidth = 'col-xs-12 col-md-3', 'col-xs-12 col-md-3', 'col-xs-12 col-md-3', 'col-xs-12 col-md-3' %}
+
+{% else %}
+
+ {% set leftwidth, mleftwidth, mrightwidth, rightwidth = 'col-xs-12 col-md-3', 'col-xs-12 col-md-3', 'col-xs-12 col-md-3', 'col-xs-12 col-md-3' %}
+
+{% endif %}
+
+
+{# Setting up variable that determines the background color for section #}
+{% set bgcolor = content.field_background_color['#items'].getString() %}
+
+{% if bgcolor == ''%}
+ {% set bgcolor = 'transparent-bg' %}
+{% endif %}
+
+{# Prints div with classes, and content without Width and Background. #}
+<div{{ attributes.addClass(classes) }}>
+ <div class="paragraph__column {{ bgcolor }} para_4_col">
+
+{% if page_content_type == 'landing_page' %}
+ <div class="container">
+ {% endif %}
+
+{% set thecont = [] %}
+ {% for item in content|without('field_column_style_4')|without('field_background_color') %}
+ {% set thecont = thecont|merge(item) %}
+ {% endfor %}
+
+ <div class="{{ leftwidth }} col-l">
+ {{ thecont[0] }}
+ </div>
+
+ <div class="{{ mleftwidth }} col-m">
+ {{ thecont[1] }}
+ </div>
+
+ <div class="{{ mrightwidth }} col-m">
+ {{ thecont[2] }}
+ </div>
+
+ <div class="{{ rightwidth }} col-r">
+ {{ thecont[3] }}
+ </div>
+
+ {% if page_content_type == 'landing_page' %}
+ </div>
+ {% endif %}
+
+ </div>
+</div>