/* =========================
   3-column grid wrapper
   ========================= */

.field--name-field-reference.grid-3.field__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.field--name-field-reference.grid-3.field__items > .field__item {
  min-width: 0;
}


/* ========== Paragraph CSS ========== */
/* ========== Grid 2 columns ========== */

body .region-content .paragraph-grid-2 > .field__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.grid-2 div {
  padding: 20px;
  width: fit-content;
  height: fit-content;
  line-height: 0;
}
.grid-2 img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}


body .region-content .paragraph-grid-2 > .field--name-field-paragraphs.field__items > .field__item {
  display: flex;
  min-width: 0;
}
/* ========== Grid 3 columns ========== */

body .region-content .paragraph-grid-3 > .field__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* body .region-content .paragraph-grid-3 > .field--name-field-paragraphs.field__items > .field__item {
  display: flex;
  min-width: 0;
} */
/* ========== Grid 4 columns ========== */

body .region-content .paragraph-grid-4 > .field__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

body .region-content .paragraph-grid-4 > .field__items > .field__item {
  display: flex;
  min-width: 0;
}

/* ========== Grid 5 columns ========== */

body .region-content .paragraph-grid-5 > .field__items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

body .region-content .paragraph-grid-5 > .field__items > .field__item {
  display: flex;
  min-width: 0;
}

@media (max-width: 1200px) {
.m-double > .field__items {
  grid-template-columns: 1fr 1fr 1fr !important;
}
.paragraph-grid-4 > .field__items {
  grid-template-columns: 1fr 1fr !important;
}
.paragraph-grid-5 > .field__items {
  grid-template-columns: 1fr 1fr 1fr !important;
}
}

@media (max-width: 980px) {
.paragraph-grid-2 > .field__items {
  grid-template-columns: 1fr !important;
}
.paragraph-grid-3 > .field__items,
.paragraph-grid-4 > .field__items,
.paragraph-grid-5 > .field__items {
  grid-template-columns: 1fr 1fr !important;
  margin-left: 20px;
  margin-right: 20px;
}
}

@media (max-width: 768px) {
.paragraph-grid-2 > .field__items,
.paragraph-grid-3 > .field__items,
.paragraph-grid-4 > .field__items,
.paragraph-grid-5 > .field__items {
  grid-template-columns: 1fr !important;
}
.m-double > .field__items {
  grid-template-columns: 1fr 1fr !important;
}
}



.col2-paragraph {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.col2-paragraph.paragraph-width-80 {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.col2-paragraph.paragraph-width-90 {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.col2-paragraph.teaser-left {
  grid-template-columns: 2fr 1fr;
}
.col2-paragraph.teaser-right {
  grid-template-columns: 1fr 2fr;
}

@media (max-width: 980px) { 
.col2-paragraph.teaser-left,
.col2-paragraph.teaser-right {
  display: flex;
  flex-direction: column;
} 

}

.col2-paragraph.teaser-left .field--name-field-reference {
  grid-column: 1;
  grid-row: 2;
}
.col2-paragraph.teaser-left .field--name-field-body {
  grid-column: 2;
  grid-row: 2;
  justify-self: center; /* horizontal */
  align-self: center;   /* vertical */
}
.col2-paragraph.teaser-left .field--name-field-title {
  grid-column: 1 / -1;
  grid-row: 1;
}
.col2-paragraph.teaser-right .field--name-field-reference {
  grid-column: 2;
  grid-row: 2;
}
.col2-paragraph.teaser-right .field--name-field-body {
  grid-column: 1;
  grid-row: 2;
  justify-self: center; /* horizontal */
  align-self: center;   /* vertical */
}
.col2-paragraph.teaser-right .field--name-field-title {
  grid-column: 1 / -1;
  grid-row: 1;
}